diff --git a/common/changes/@visactor/vstory-animate/feat-arrange_2024-12-24-12-59.json b/common/changes/@visactor/vstory-animate/feat-arrange_2024-12-24-12-59.json new file mode 100644 index 00000000..402e53ee --- /dev/null +++ b/common/changes/@visactor/vstory-animate/feat-arrange_2024-12-24-12-59.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vstory-animate", + "comment": "feat: add arrange demo, support line growPoint animate", + "type": "none" + } + ], + "packageName": "@visactor/vstory-animate" +} \ No newline at end of file diff --git a/common/changes/@visactor/vstory-core/feat-arrange_2024-12-23-14-22.json b/common/changes/@visactor/vstory-core/feat-arrange_2024-12-23-14-22.json new file mode 100644 index 00000000..3f4c396d --- /dev/null +++ b/common/changes/@visactor/vstory-core/feat-arrange_2024-12-23-14-22.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vstory-core", + "comment": "feat: enhance vchart animate arrange", + "type": "none" + } + ], + "packageName": "@visactor/vstory-core" +} \ No newline at end of file diff --git a/common/changes/@visactor/vstory-core/feat-arrange_2024-12-24-12-59.json b/common/changes/@visactor/vstory-core/feat-arrange_2024-12-24-12-59.json new file mode 100644 index 00000000..20ed9eed --- /dev/null +++ b/common/changes/@visactor/vstory-core/feat-arrange_2024-12-24-12-59.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vstory-core", + "comment": "feat: add arrange demo, support line growPoint animate", + "type": "none" + } + ], + "packageName": "@visactor/vstory-core" +} \ No newline at end of file diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json index dcaed3cd..e66c6629 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.3", - // "@visactor/vrender-core": "0.21.2-vstory.3", - // "@visactor/vrender-kits": "0.21.2-vstory.3", - // "@visactor/vrender-components": "0.21.2-vstory.3", + // "@visactor/vrender": "0.21.5-vstory.2", + // "@visactor/vrender-core": "0.21.5-vstory.2", + // "@visactor/vrender-kits": "0.21.5-vstory.2", + // "@visactor/vrender-components": "0.21.5-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 75a2f0b5..a7bd71b5 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.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.21 '@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.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-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.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-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.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-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.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.21 '@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.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-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.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-animate': workspace:0.0.21 '@visactor/vstory-core': workspace:0.0.21 @@ -388,13 +388,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-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.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-animate': workspace:0.0.21 '@visactor/vstory-core': workspace:0.0.21 @@ -466,13 +466,13 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vchart': 1.13.1-vstory.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-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.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': ~0.18.17 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': ~0.18.17 '@visactor/vstory-core': workspace:0.0.21 '@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.3 + '@visactor/vchart': 1.13.2-vstory.2 '@visactor/vchart-extension': 0.0.3-vstory.2 '@visactor/vdataset': 0.18.18 - '@visactor/vrender': 0.21.2-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender': 0.21.5-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-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.3: - resolution: {integrity: sha512-15IDx6VH1W9PHCUbQiYEZSiS5kIIP0VxgBCV65A7pGj61+QXCJBfTpjQmxthrfeUo5dQa4FAy3TY8tlw/7161g==} + /@visactor/vchart/1.13.2-vstory.2: + resolution: {integrity: sha512-6rpx6kSeYdQ2W5cz4BAStgVuv9bQErdMjKnmVSP7ipp3syYE53oT9r3aXSpZmqthpPXIRbCwOuT6RUhs44Q0MA==} dependencies: '@visactor/vdataset': 0.19.2 - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-hierarchy': 0.15.1-vstory.3 - '@visactor/vgrammar-projection': 0.15.1-vstory.3 - '@visactor/vgrammar-sankey': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vgrammar-venn': 0.15.1-vstory.3 - '@visactor/vgrammar-wordcloud': 0.15.1-vstory.3 - '@visactor/vgrammar-wordcloud-shape': 0.15.1-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-hierarchy': 0.15.2-vstory.2 + '@visactor/vgrammar-projection': 0.15.2-vstory.2 + '@visactor/vgrammar-sankey': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vgrammar-venn': 0.15.2-vstory.2 + '@visactor/vgrammar-wordcloud': 0.15.2-vstory.2 + '@visactor/vgrammar-wordcloud-shape': 0.15.2-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 - '@visactor/vutils-extension': 1.13.1-vstory.3 + '@visactor/vutils-extension': 1.13.2-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.3: - resolution: {integrity: sha512-VLBaOytdBLBfvXZRewWme+AYMKNOpOrri/citrf5oHhSf3/z3raMkpzYh1nNCaSu2jty9Yz1Ax9jNaIDQOTVqA==} + /@visactor/vgrammar-coordinate/0.15.2-vstory.2: + resolution: {integrity: sha512-phVtkBEBsr5su5kIiFINXBMDl2XgcLWKEu9m3cihu32YJoiHqGlZTGqrCzgYY46bbj/MubmU06FB2xAGWxDhXg==} dependencies: - '@visactor/vgrammar-util': 0.15.1-vstory.3 + '@visactor/vgrammar-util': 0.15.2-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-core/0.15.1-vstory.3: - resolution: {integrity: sha512-7NLbQFEbgGILg4xi1htOyQXoImkdfMcFsv47RvXeYK1YBa3+3gG3FMHi8ppS49uNpQxj3rVdTORTmG7LA1e3YQ==} + /@visactor/vgrammar-core/0.15.2-vstory.2: + resolution: {integrity: sha512-FYrlvdkdGrCgCIpwzULx3YcxJl1yxUQWNcSWWdbDVPf4WYUNYw7y9LvDRAVbTn20+1aFH30aEuJMxldSDmZUaw==} dependencies: '@visactor/vdataset': 0.19.2 - '@visactor/vgrammar-coordinate': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-components': 0.21.2-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-coordinate': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-components': 0.21.5-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-hierarchy/0.15.1-vstory.3: - resolution: {integrity: sha512-X59lGl3kedC4gjIOsyLaJggpkQcNmyRqTSnOmZJYsdzKYU8tHbEYE9q9fXT00+McI2K0pM7L4Fy/XuyeU1XmGQ==} + /@visactor/vgrammar-hierarchy/0.15.2-vstory.2: + resolution: {integrity: sha512-dYsJhq5+ZbcjkH9u37qdfNlByjgDEHxqPuK1ix4ChszC66MfZonT/hPBEUn/ayRuYZkoUeI6KJ93Rp8uyaWlDw==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-projection/0.15.1-vstory.3: - resolution: {integrity: sha512-LxJMb2Ak7Ev1w3FNI/yQzbacrmkfx8oiv2K+EaWrFgn+/IXiZRZ1g8FTR0LL4PL/1b2KoBZIDbRg/9w042MYGQ==} + /@visactor/vgrammar-projection/0.15.2-vstory.2: + resolution: {integrity: sha512-F8213dlFapGY8/rhGfGzHGRFrxlPuWYVGKx06rHNlJG+tD2Kf7WlVMGDbkEzFsKIDT+vpFko84HmSsjldnq04Q==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 '@visactor/vutils': 0.19.2 d3-geo: 1.12.1 dev: false - /@visactor/vgrammar-sankey/0.15.1-vstory.3: - resolution: {integrity: sha512-Yfm9jK1xApxduWKE/Y1Pn1Yj64NPuOuq5gCk/dMq+xej83TH+H3nzXqpbspQoUz2+e8SHvwS62Uqf5l+I1mq7Q==} + /@visactor/vgrammar-sankey/0.15.2-vstory.2: + resolution: {integrity: sha512-CHd27lZuhHnKPlRMZdONH2o6/y/5e8OqPqPrKs+I9XKrCCWrIX1VU6HyGRFHKg6+YEVkm0/Qyk2CvEvNEdvDhw==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-util/0.15.1-vstory.3: - resolution: {integrity: sha512-fods7zFVNiGZiQeTJO1uIuZQq2QHy9ea33b44r70u3SCjGtKWRinISZqrzazeb5YHWLE0+XXU4/1MGPSqKlMmg==} + /@visactor/vgrammar-util/0.15.2-vstory.2: + resolution: {integrity: sha512-DVgHGT2qY9ryjmDBLH5baXXkcRu1BItdvRWTHNXo2QjWHMdi2qWnSWdhsSTu68oRCCTS34hDyphuTLlgL32glA==} dependencies: - '@visactor/vrender-core': 0.21.2-vstory.3 + '@visactor/vrender-core': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-venn/0.15.1-vstory.3: - resolution: {integrity: sha512-6oHKsFt9XWc8XHRzAojvrO6y4TwNop6tgtEhZtlhbyZ2Flv47bIUl1CUqiBFQ36XSWY6nt4Z23ufN8l38buptg==} + /@visactor/vgrammar-venn/0.15.2-vstory.2: + resolution: {integrity: sha512-ODSa3KzTcK9OXX9ZShDlGeGsj+wmMAVjg2aNy2rEN7WJMkajysf+fI7q5/YfboQ22H1kF4/3aWZAUqQpyYhWUA==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-wordcloud-shape/0.15.1-vstory.3: - resolution: {integrity: sha512-b8cignTZN10WxiRH3zlucZjOOzN8mYSqTJm2WCBsmVF++qIgFYYr6sSAdyNILxdC8F2hiIwUHC0SJ3+vGE344Q==} + /@visactor/vgrammar-wordcloud-shape/0.15.2-vstory.2: + resolution: {integrity: sha512-wr2G9sL9aVJuTWthS1VDmALscGoiBJTibJ/AVdZVTbSw25ZaIFUb9Ey8Df/i4BRJp7f8Aa08d1K4lRBozezxbw==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-vstory.2 '@visactor/vscale': 0.19.2 '@visactor/vutils': 0.19.2 dev: false - /@visactor/vgrammar-wordcloud/0.15.1-vstory.3: - resolution: {integrity: sha512-UVd0Hh65FTC3Yhy5Btp2lF1QfY6A+ehqf7NMQmcC3nu4ORcx2YoQJAeFYE+7BmUX9XCEAfKkS6mPKWRe9cFU5g==} + /@visactor/vgrammar-wordcloud/0.15.2-vstory.2: + resolution: {integrity: sha512-fHLi8ziX7zHT1XBTWt0E3dg1ZVCs8oygKOwvPtYKvqk1LGS+MvrT82wkXpJxYe7YHc6D7lWlaVB5LnnTGRTykw==} dependencies: - '@visactor/vgrammar-core': 0.15.1-vstory.3 - '@visactor/vgrammar-util': 0.15.1-vstory.3 - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vgrammar-core': 0.15.2-vstory.2 + '@visactor/vgrammar-util': 0.15.2-vstory.2 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-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.3: - resolution: {integrity: sha512-9tpEUsTedESg6h5XSAOFcmqxP/sMbkxIqPmWwZVJreoFxUp+qjMSuUMCSpd1Bvdc3+LiMmI5hR+JTK0jpzDCdg==} + /@visactor/vrender-components/0.21.5-vstory.2: + resolution: {integrity: sha512-K//FVgG+ONqGNb/8cS7EJXfqGtqrS5D9EtKtKOZV4S2ALKcfx3WxAK3zhq11nClrSZSNG540mBcjynj5+yV8mA==} dependencies: - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-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.3: - resolution: {integrity: sha512-YMR/fExUZgr6/E7e0V9OzvoJVd9A6rfQLtcoXI1QL8SfO19+lR9tRpRq20qQoRgfV5A+rxel/dPEHrvxclq49g==} + /@visactor/vrender-core/0.21.5-vstory.2: + resolution: {integrity: sha512-yGnXIQ0PSKHH9yVTCFztmaqoJVlfFBNAzdwv/JyxhFZNM3sZxJaiUK4z0aCbRyrGqoqyM9ucQTR4rtS+B8o9Bg==} 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.3: - resolution: {integrity: sha512-mWYClwyIWOMzMLJFVNJrKrks5fr3yeNrNEF0twRyOaDtHRxKsJBSyeshum2MZJd3YA0fFiYvTEX6BscfthRhAg==} + /@visactor/vrender-kits/0.21.5-vstory.2: + resolution: {integrity: sha512-XCXCoZfare49zEqlReN1iaHFFc0VRErQTCkSezAmB/mQ+TFE9y5BJJWAj390n4K74yjIG7j/5403wjaK3CdLGw==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.21.2-vstory.3 + '@visactor/vrender-core': 0.21.5-vstory.2 '@visactor/vutils': 0.19.2 lottie-web: 5.12.2 roughjs: 4.5.2 dev: false - /@visactor/vrender/0.21.2-vstory.3: - resolution: {integrity: sha512-my+sLFDzBFGojPrgvktjunNEzqfZXsQEwlx+Srn5d7CLjQbrpB46JTwOu56I1ORKGe314hrsynbfGAuWyM0lCg==} + /@visactor/vrender/0.21.5-vstory.2: + resolution: {integrity: sha512-im3v/OjS1M6klG8mDemIyjt6JpxvX8Gkj2/aHVo/Hsrohy7v1h4AzA4GR5IxIRlYyX7rpmmIVBQFUBFXKikGOw==} dependencies: - '@visactor/vrender-core': 0.21.2-vstory.3 - '@visactor/vrender-kits': 0.21.2-vstory.3 + '@visactor/vrender-core': 0.21.5-vstory.2 + '@visactor/vrender-kits': 0.21.5-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.3: - resolution: {integrity: sha512-+sNToW0zqMyrQRsd7CDWSc4uuDXk86z8VOdI4UfsCxxCFJhuK4oBN+dkzZ8o71MIi36uLSRjnQzk0UrW3qo7xA==} + /@visactor/vutils-extension/1.13.2-vstory.2: + resolution: {integrity: sha512-V+U6DkVkQBmNqE52XoDrZE/9mc3nvxG4f+04volhCSZ/trLYl0baf+qYE/0ejXcLOuEZYu0BZk2snAfMPzhb3Q==} dependencies: '@visactor/vdataset': 0.19.2 '@visactor/vutils': 0.19.2 diff --git a/docs/assets/examples/en/animate/bar-bounce.md b/docs/assets/examples/en/animate/bar-bounce.md index c35c1ab3..99fd6b16 100644 --- a/docs/assets/examples/en/animate/bar-bounce.md +++ b/docs/assets/examples/en/animate/bar-bounce.md @@ -91,7 +91,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/animate/bar-leap.md b/docs/assets/examples/en/animate/bar-leap.md index d9fd9ffa..07229b31 100644 --- a/docs/assets/examples/en/animate/bar-leap.md +++ b/docs/assets/examples/en/animate/bar-leap.md @@ -91,7 +91,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/animate/pie-leap.md b/docs/assets/examples/en/animate/pie-leap.md index d3d83f08..c1531b98 100644 --- a/docs/assets/examples/en/animate/pie-leap.md +++ b/docs/assets/examples/en/animate/pie-leap.md @@ -92,7 +92,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/arrange/bar-line-arrange.md b/docs/assets/examples/en/arrange/bar-line-arrange.md new file mode 100644 index 00000000..90a140da --- /dev/null +++ b/docs/assets/examples/en/arrange/bar-line-arrange.md @@ -0,0 +1,204 @@ +--- +category: examples +group: arrange +title: vchart-arrange +keywords: vchart-arrange +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vchart-arrange.gif +--- + +# VChart Animation Arrangement + +The `VChart` chart component can refer to [VChart Chart Elements](/vstory/demo/character/vchart) and is a generic Character element that can configure any VChart spec. So, after configuring a VChart spec, we can use VStory's animation arrangement capabilities to control the animation effects of different components, series, axes, legends, and other components of the chart. + +In this demo, we will demonstrate the arrangement logic between bars, lines, and axes in a combined chart. + +## Code Demo + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +const spec = { + type: 'common', + animation: false, + seriesField: 'color', + data: [ + { + id: 'id0', + values: [ + { x: '周一', type: '早餐', y: 15 }, + { x: '周一', type: '午餐', y: 25 }, + { x: '周二', type: '早餐', y: 12 }, + { x: '周二', type: '午餐', y: 30 }, + { x: '周三', type: '早餐', y: 15 }, + { x: '周三', type: '午餐', y: 24 }, + { x: '周四', type: '早餐', y: 10 }, + { x: '周四', type: '午餐', y: 25 }, + { x: '周五', type: '早餐', y: 13 }, + { x: '周五', type: '午餐', y: 20 }, + { x: '周六', type: '早餐', y: 10 }, + { x: '周六', type: '午餐', y: 22 }, + { x: '周日', type: '早餐', y: 12 }, + { x: '周日', type: '午餐', y: 19 } + ] + }, + { + id: 'id1', + values: [ + { x: '周一', type: '饮料', y: 22 }, + { x: '周二', type: '饮料', y: 43 }, + { x: '周三', type: '饮料', y: 33 }, + { x: '周四', type: '饮料', y: 22 }, + { x: '周五', type: '饮料', y: 10 }, + { x: '周六', type: '饮料', y: 30 }, + { x: '周日', type: '饮料', y: 50 } + ] + } + ], + series: [ + { + type: 'bar', + id: 'bar', + dataIndex: 0, + label: { visible: false }, + seriesField: 'type', + dataIndex: 0, + xField: ['x', 'type'], + yField: 'y' + }, + { + type: 'line', + id: 'line', + dataIndex: 1, + label: { visible: false }, + seriesField: 'type', + xField: 'x', + yField: 'y', + stack: false + } + ], + axes: [ + { + orient: 'left', + id: 'axes-left', + domainLine: { visible: true }, + seriesId: ['line'], + grid: { visible: false } + }, + { orient: 'right', id: 'axes-right', domainLine: { visible: true }, seriesId: ['bar'], seriesIndex: [0] }, + { orient: 'bottom', label: { visible: true }, type: 'band' } + ], + legends: { + visible: true, + orient: 'bottom' + } +}; + +const dsl = { + characters: [ + { + type: 'VChart', + id: 'bar-line-series', + position: { + top: 50, + left: 50, + width: 500, + height: 300 + }, + options: { + spec, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + cornerRadius: 8 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: 'bar-line-series', + characterActions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + // 除了柱子和右轴，其他模块执行appear动画 + selector: ':not(bar) :not(#axes-right)', + animation: { + duration: 2000, + easing: 'linear' + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + // 柱子执行appear动画 + selector: 'bar', + animation: { + duration: 800, + easing: 'linear' + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + // 右轴执行appear动画 + selector: '#axes-right', + animation: { + duration: 800, + easing: 'linear' + } + } + ] + }, + { + startTime: 5500, + action: 'disappear', + payload: { + style: {}, + animation: { + // effect: 'fade', + duration: 1000, + easing: 'linear' + } + } + } + ] + } + ] + } + ] + } + ] +}; + +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + +player.play(1); +window.vstory = story; + +window['story'] = story; +window['vstory'] = story; +``` diff --git a/docs/assets/examples/en/arrange/line-arrange.md b/docs/assets/examples/en/arrange/line-arrange.md new file mode 100644 index 00000000..47a5fba6 --- /dev/null +++ b/docs/assets/examples/en/arrange/line-arrange.md @@ -0,0 +1,197 @@ +--- +category: examples +group: arrange +title: vchart-arrange +keywords: vchart-arrange +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vchart-arrange.gif +--- + +# Line Chart Animation Arrangement + +The `VChart` chart component can refer to [VChart Chart Elements](/vstory/demo/character/vchart) for a generic Character element that can be configured with any VChart spec. Once a VChart spec is configured, we can use VStory's animation arrangement capabilities to control the animation effects of different components, series, axes, legends, and other components of the chart. + +In this demo, we will demonstrate the animation arrangement of line segments in a multi-series line chart. + +## Code Demo + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +const typeList = ['Nail polish', 'Eyebrow pencil', 'Rouge', 'Lipstick', 'Eyeshadows', 'Eyeliner', 'Foundation', 'Lip gloss', 'Mascara']; +const USA = typeList.map((item, i) => ({ + type: item, + country: 'USA', + value: Math.random() * 1000 +})); +const EU = typeList.map((item, i) => ({ + type: item, + country: 'EU', + value: 1000 + Math.random() * 1000 +})); +const China = typeList.map((item, i) => ({ + type: item, + country: 'China', + value: 2000 + Math.random() * 1000 +})); +const Africa = typeList.map((item, i) => ({ + type: item, + country: 'Africa', + value: 3000 + Math.random() * 1000 +})); + +const spec = { + type: 'common', + series: [USA, EU, China, Africa].map((item, i) => ({ + type: 'line', + id: 'line' + i, + data: { + id: '' + i, + values: item + }, + point: { + visible: false + }, + xField: 'type', + yField: 'value' + })), + axes: [ + { + orient: 'left', + type: 'linear' + }, + { + orient: 'bottom', + type: 'band' + } + ] +}; + +const dsl = { + characters: [ + { + type: 'VChart', + id: 'bar-line-series', + position: { + top: 50, + left: 50, + width: 500, + height: 300 + }, + options: { + spec, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + cornerRadius: 8 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: 'bar-line-series', + characterActions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: ':not(line)', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: '#line0', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 1000, + action: 'appear', + payload: [ + { + selector: '#line1', + animation: { + duration: 1000, + easing: 'linear', + effect: 'fade' + } + } + ] + }, + { + startTime: 2000, + action: 'appear', + payload: [ + { + selector: '#line2', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'vertical' + } + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + selector: '#line3', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'horizontal' + } + } + } + ] + } + ] + } + ] + } + ] + } + ] +}; + +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + +player.play(1); +window.vstory = story; + +window['story'] = story; +window['vstory'] = story; +``` diff --git a/docs/assets/examples/en/arrange/vchart-arrange.md b/docs/assets/examples/en/arrange/vchart-arrange.md index e2ab2835..f51500f4 100644 --- a/docs/assets/examples/en/arrange/vchart-arrange.md +++ b/docs/assets/examples/en/arrange/vchart-arrange.md @@ -300,7 +300,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/balloon-bar.md b/docs/assets/examples/en/character/balloon-bar.md index db60733c..673b5668 100644 --- a/docs/assets/examples/en/character/balloon-bar.md +++ b/docs/assets/examples/en/character/balloon-bar.md @@ -165,7 +165,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/clipped-image.md b/docs/assets/examples/en/character/clipped-image.md index afe9a1bb..46c6ac5a 100644 --- a/docs/assets/examples/en/character/clipped-image.md +++ b/docs/assets/examples/en/character/clipped-image.md @@ -16,7 +16,7 @@ You can achieve image clipping effects under various shapes through the backgrou ```javascript livedemo template=vstory VStory.registerAll(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 700, height: 500, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); const clipPath = [ diff --git a/docs/assets/examples/en/character/dynamic-line.md b/docs/assets/examples/en/character/dynamic-line.md index 6045bf25..532d24eb 100644 --- a/docs/assets/examples/en/character/dynamic-line.md +++ b/docs/assets/examples/en/character/dynamic-line.md @@ -43,7 +43,7 @@ const data = [ { year: 'September 13, 2022', name: 'iPhone 16', price: 5999, bg: 'iphone16.png' } ].map(item => ({ ...item, bg: `https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/demo/${item.bg}` })); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/poptip.md b/docs/assets/examples/en/character/poptip.md index 103c6062..a293d847 100644 --- a/docs/assets/examples/en/character/poptip.md +++ b/docs/assets/examples/en/character/poptip.md @@ -22,7 +22,7 @@ VStory.registerAll(); VStory.registerPopTip(); VStory.registerPopTipAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/ranking-bar.md b/docs/assets/examples/en/character/ranking-bar.md index 0b347f18..9a673bf3 100644 --- a/docs/assets/examples/en/character/ranking-bar.md +++ b/docs/assets/examples/en/character/ranking-bar.md @@ -158,7 +158,7 @@ async function loadDSL() { const dsl = await loadDSL(); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/single-pie.md b/docs/assets/examples/en/character/single-pie.md index eb2e14e2..2b51436e 100644 --- a/docs/assets/examples/en/character/single-pie.md +++ b/docs/assets/examples/en/character/single-pie.md @@ -19,7 +19,7 @@ VStory.registerAll(); VStory.registerSinglePie(); VStory.registerSinglePieAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 500, height: 350, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/story-label-item.md b/docs/assets/examples/en/character/story-label-item.md index 82a26c9e..0dd91a40 100644 --- a/docs/assets/examples/en/character/story-label-item.md +++ b/docs/assets/examples/en/character/story-label-item.md @@ -24,7 +24,7 @@ VStory.registerAll(); VStory.registerLabelItem(); VStory.registerLabelItemAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 750, height: 450, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/timeline.md b/docs/assets/examples/en/character/timeline.md index d6476c69..2e102dd8 100644 --- a/docs/assets/examples/en/character/timeline.md +++ b/docs/assets/examples/en/character/timeline.md @@ -94,7 +94,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/unit.md b/docs/assets/examples/en/character/unit.md index 7936ec84..a9997b9f 100644 --- a/docs/assets/examples/en/character/unit.md +++ b/docs/assets/examples/en/character/unit.md @@ -151,7 +151,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/vchart.md b/docs/assets/examples/en/character/vchart.md index 151e3c4c..e76f01b4 100644 --- a/docs/assets/examples/en/character/vchart.md +++ b/docs/assets/examples/en/character/vchart.md @@ -162,7 +162,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/vgraphic.md b/docs/assets/examples/en/character/vgraphic.md index 68913aea..c642abd1 100644 --- a/docs/assets/examples/en/character/vgraphic.md +++ b/docs/assets/examples/en/character/vgraphic.md @@ -63,7 +63,7 @@ const characterList = [ { type:'Shape', options: shape, effect: 'clipRange' } ] -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/character/wave-scatter.md b/docs/assets/examples/en/character/wave-scatter.md index d047ffd2..89ecf6c5 100644 --- a/docs/assets/examples/en/character/wave-scatter.md +++ b/docs/assets/examples/en/character/wave-scatter.md @@ -86,7 +86,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/templates/unit-visualize-template.md b/docs/assets/examples/en/templates/unit-visualize-template.md index f57ac84e..43cfc984 100644 --- a/docs/assets/examples/en/templates/unit-visualize-template.md +++ b/docs/assets/examples/en/templates/unit-visualize-template.md @@ -152,7 +152,7 @@ const spec = { } const dsl = VStory.createUnitTemplate(spec); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.35, scaleY: 0.35 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1920, height: 1080, scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/works-show/annotation-show.md b/docs/assets/examples/en/works-show/annotation-show.md index fb2cd902..0fbb2db2 100644 --- a/docs/assets/examples/en/works-show/annotation-show.md +++ b/docs/assets/examples/en/works-show/annotation-show.md @@ -23,7 +23,7 @@ VStory.registerLabelItemAction(); VStory.registerPopTip(); VStory.registerPopTipAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1080, height: 720, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/works-show/chart-join.md b/docs/assets/examples/en/works-show/chart-join.md index 293655db..c0b0d353 100644 --- a/docs/assets/examples/en/works-show/chart-join.md +++ b/docs/assets/examples/en/works-show/chart-join.md @@ -77,7 +77,7 @@ const getChartSpec = (i, showLeftAxis) => { }; } -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000, height: 800, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/works-show/national-memorial.md b/docs/assets/examples/en/works-show/national-memorial.md index 9d011bd0..18f52d11 100644 --- a/docs/assets/examples/en/works-show/national-memorial.md +++ b/docs/assets/examples/en/works-show/national-memorial.md @@ -1589,7 +1589,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: width / 2, height: height / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width, height, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/works-show/unit-gun-death.md b/docs/assets/examples/en/works-show/unit-gun-death.md index cfdefcad..3c60b9b2 100644 --- a/docs/assets/examples/en/works-show/unit-gun-death.md +++ b/docs/assets/examples/en/works-show/unit-gun-death.md @@ -356,7 +356,7 @@ const dsl = VStory.createUnitTemplate(spec); console.log(dsl); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1550, height: 800, scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/en/works-show/visualize-history.md b/docs/assets/examples/en/works-show/visualize-history.md index 8d780964..6290c095 100644 --- a/docs/assets/examples/en/works-show/visualize-history.md +++ b/docs/assets/examples/en/works-show/visualize-history.md @@ -13690,7 +13690,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 1280, height: 720, background: '#ebecf0', scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json index 41a34db6..6717d0b9 100644 --- a/docs/assets/examples/menu.json +++ b/docs/assets/examples/menu.json @@ -181,6 +181,20 @@ "zh": "VChart动画编排", "en": "VChart Animation arrangement" } + }, + { + "path": "bar-line-arrange", + "title": { + "zh": "VChart组合图动画编排", + "en": "VChart combination chart Animation arrangement" + } + }, + { + "path": "line-arrange", + "title": { + "zh": "VChart多系列动画编排", + "en": "VChart multiple series Animation arrangement" + } } ] }, diff --git a/docs/assets/examples/zh/animate/bar-bounce.md b/docs/assets/examples/zh/animate/bar-bounce.md index eb3443e5..f57c27a6 100644 --- a/docs/assets/examples/zh/animate/bar-bounce.md +++ b/docs/assets/examples/zh/animate/bar-bounce.md @@ -91,7 +91,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/animate/bar-leap.md b/docs/assets/examples/zh/animate/bar-leap.md index b57e195f..3da898c6 100644 --- a/docs/assets/examples/zh/animate/bar-leap.md +++ b/docs/assets/examples/zh/animate/bar-leap.md @@ -91,7 +91,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/animate/pie-leap.md b/docs/assets/examples/zh/animate/pie-leap.md index e368ef9f..5739caf6 100644 --- a/docs/assets/examples/zh/animate/pie-leap.md +++ b/docs/assets/examples/zh/animate/pie-leap.md @@ -92,7 +92,7 @@ const dsl = { ] } -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/arrange/bar-line-arrange.md b/docs/assets/examples/zh/arrange/bar-line-arrange.md new file mode 100644 index 00000000..b3dcea88 --- /dev/null +++ b/docs/assets/examples/zh/arrange/bar-line-arrange.md @@ -0,0 +1,204 @@ +--- +category: examples +group: arrange +title: vchart-arrange +keywords: vchart-arrange +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vchart-arrange.gif +--- + +# vchart动画编排 + +`VChart`图表组件可以参考[VChart图表元素](/vstory/demo/character/vchart)是一种通用的Character元素，可以配置任意的VChart spec。那么当配置好了一个VChart的spec之后，我们就基于VStory的动画编排能力，去控制该图表不同组件、系列、坐标轴、图例等组件的动画效果。 + +这个demo，我们将演示组合图中柱子、折线、轴之间的编排逻辑。 + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +const spec = { + type: 'common', + animation: false, + seriesField: 'color', + data: [ + { + id: 'id0', + values: [ + { x: '周一', type: '早餐', y: 15 }, + { x: '周一', type: '午餐', y: 25 }, + { x: '周二', type: '早餐', y: 12 }, + { x: '周二', type: '午餐', y: 30 }, + { x: '周三', type: '早餐', y: 15 }, + { x: '周三', type: '午餐', y: 24 }, + { x: '周四', type: '早餐', y: 10 }, + { x: '周四', type: '午餐', y: 25 }, + { x: '周五', type: '早餐', y: 13 }, + { x: '周五', type: '午餐', y: 20 }, + { x: '周六', type: '早餐', y: 10 }, + { x: '周六', type: '午餐', y: 22 }, + { x: '周日', type: '早餐', y: 12 }, + { x: '周日', type: '午餐', y: 19 } + ] + }, + { + id: 'id1', + values: [ + { x: '周一', type: '饮料', y: 22 }, + { x: '周二', type: '饮料', y: 43 }, + { x: '周三', type: '饮料', y: 33 }, + { x: '周四', type: '饮料', y: 22 }, + { x: '周五', type: '饮料', y: 10 }, + { x: '周六', type: '饮料', y: 30 }, + { x: '周日', type: '饮料', y: 50 } + ] + } + ], + series: [ + { + type: 'bar', + id: 'bar', + dataIndex: 0, + label: { visible: false }, + seriesField: 'type', + dataIndex: 0, + xField: ['x', 'type'], + yField: 'y' + }, + { + type: 'line', + id: 'line', + dataIndex: 1, + label: { visible: false }, + seriesField: 'type', + xField: 'x', + yField: 'y', + stack: false + } + ], + axes: [ + { + orient: 'left', + id: 'axes-left', + domainLine: { visible: true }, + seriesId: ['line'], + grid: { visible: false } + }, + { orient: 'right', id: 'axes-right', domainLine: { visible: true }, seriesId: ['bar'], seriesIndex: [0] }, + { orient: 'bottom', label: { visible: true }, type: 'band' } + ], + legends: { + visible: true, + orient: 'bottom' + } +}; + +const dsl = { + characters: [ + { + type: 'VChart', + id: 'bar-line-series', + position: { + top: 50, + left: 50, + width: 500, + height: 300 + }, + options: { + spec, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + cornerRadius: 8 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: 'bar-line-series', + characterActions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + // 除了柱子和右轴，其他模块执行appear动画 + selector: ':not(bar) :not(#axes-right)', + animation: { + duration: 2000, + easing: 'linear' + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + // 柱子执行appear动画 + selector: 'bar', + animation: { + duration: 800, + easing: 'linear' + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + // 右轴执行appear动画 + selector: '#axes-right', + animation: { + duration: 800, + easing: 'linear' + } + } + ] + }, + { + startTime: 5500, + action: 'disappear', + payload: { + style: {}, + animation: { + // effect: 'fade', + duration: 1000, + easing: 'linear' + } + } + } + ] + } + ] + } + ] + } + ] +}; + +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + +player.play(1); +window.vstory = story; + +window['story'] = story; +window['vstory'] = story; +``` diff --git a/docs/assets/examples/zh/arrange/line-arrange.md b/docs/assets/examples/zh/arrange/line-arrange.md new file mode 100644 index 00000000..aa4337a5 --- /dev/null +++ b/docs/assets/examples/zh/arrange/line-arrange.md @@ -0,0 +1,197 @@ +--- +category: examples +group: arrange +title: vchart-arrange +keywords: vchart-arrange +order: 1-0 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vchart-arrange.gif +--- + +# 折线图动画编排 + +`VChart`图表组件可以参考[VChart图表元素](/vstory/demo/character/vchart)是一种通用的Character元素，可以配置任意的VChart spec。那么当配置好了一个VChart的spec之后，我们就基于VStory的动画编排能力，去控制该图表不同组件、系列、坐标轴、图例等组件的动画效果。 + +这个demo，我们将演示对多系列折线图里线段动画的编排。 + +## 代码演示 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); + +const typeList = ['Nail polish', 'Eyebrow pencil', 'Rouge', 'Lipstick', 'Eyeshadows', 'Eyeliner', 'Foundation', 'Lip gloss', 'Mascara']; +const USA = typeList.map((item, i) => ({ + type: item, + country: 'USA', + value: Math.random() * 1000 +})); +const EU = typeList.map((item, i) => ({ + type: item, + country: 'EU', + value: 1000 + Math.random() * 1000 +})); +const China = typeList.map((item, i) => ({ + type: item, + country: 'China', + value: 2000 + Math.random() * 1000 +})); +const Africa = typeList.map((item, i) => ({ + type: item, + country: 'Africa', + value: 3000 + Math.random() * 1000 +})); + +const spec = { + type: 'common', + series: [USA, EU, China, Africa].map((item, i) => ({ + type: 'line', + id: 'line' + i, + data: { + id: '' + i, + values: item + }, + point: { + visible: false + }, + xField: 'type', + yField: 'value' + })), + axes: [ + { + orient: 'left', + type: 'linear' + }, + { + orient: 'bottom', + type: 'band' + } + ] +}; + +const dsl = { + characters: [ + { + type: 'VChart', + id: 'bar-line-series', + position: { + top: 50, + left: 50, + width: 500, + height: 300 + }, + options: { + spec, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + cornerRadius: 8 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: 'bar-line-series', + characterActions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: ':not(line)', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: '#line0', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 1000, + action: 'appear', + payload: [ + { + selector: '#line1', + animation: { + duration: 1000, + easing: 'linear', + effect: 'fade' + } + } + ] + }, + { + startTime: 2000, + action: 'appear', + payload: [ + { + selector: '#line2', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'vertical' + } + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + selector: '#line3', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'horizontal' + } + } + } + ] + } + ] + } + ] + } + ] + } + ] +}; + +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + +player.play(1); +window.vstory = story; + +window['story'] = story; +window['vstory'] = story; +``` diff --git a/docs/assets/examples/zh/arrange/vchart-arrange.md b/docs/assets/examples/zh/arrange/vchart-arrange.md index 8e12dcb4..8ae981c1 100644 --- a/docs/assets/examples/zh/arrange/vchart-arrange.md +++ b/docs/assets/examples/zh/arrange/vchart-arrange.md @@ -300,7 +300,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/balloon-bar.md b/docs/assets/examples/zh/character/balloon-bar.md index 30a5d1a1..132af1a8 100644 --- a/docs/assets/examples/zh/character/balloon-bar.md +++ b/docs/assets/examples/zh/character/balloon-bar.md @@ -165,7 +165,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/clipped-image.md b/docs/assets/examples/zh/character/clipped-image.md index 8be6bb65..5811a1b5 100644 --- a/docs/assets/examples/zh/character/clipped-image.md +++ b/docs/assets/examples/zh/character/clipped-image.md @@ -17,7 +17,7 @@ cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/clipped-image. // 注册所有需要的内容 VStory.registerAll(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 700, height: 500, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); const clipPath = [ diff --git a/docs/assets/examples/zh/character/dynamic-line.md b/docs/assets/examples/zh/character/dynamic-line.md index 0dc3a3af..edadf2ec 100644 --- a/docs/assets/examples/zh/character/dynamic-line.md +++ b/docs/assets/examples/zh/character/dynamic-line.md @@ -43,7 +43,7 @@ const data = [ { year: '2022年9月13日', name: 'iPhone 16', price: 5999, bg: 'iphone16.png' } ].map(item => ({ ...item, bg: `https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/demo/${item.bg}` })); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); @@ -54,7 +54,7 @@ story.addCharacter( zIndex: 1, position: { top: 50, - left: 100, + left: 50, width: 500, height: 300 }, diff --git a/docs/assets/examples/zh/character/poptip.md b/docs/assets/examples/zh/character/poptip.md index 81800d2b..08bfcfae 100644 --- a/docs/assets/examples/zh/character/poptip.md +++ b/docs/assets/examples/zh/character/poptip.md @@ -22,7 +22,7 @@ VStory.registerAll(); VStory.registerPopTip(); VStory.registerPopTipAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/ranking-bar.md b/docs/assets/examples/zh/character/ranking-bar.md index 16bd4622..2a4e367a 100644 --- a/docs/assets/examples/zh/character/ranking-bar.md +++ b/docs/assets/examples/zh/character/ranking-bar.md @@ -158,7 +158,7 @@ async function loadDSL() { const dsl = await loadDSL(); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/single-pie.md b/docs/assets/examples/zh/character/single-pie.md index 3e632076..a01f7f6b 100644 --- a/docs/assets/examples/zh/character/single-pie.md +++ b/docs/assets/examples/zh/character/single-pie.md @@ -20,7 +20,7 @@ VStory.registerAll(); VStory.registerSinglePie(); VStory.registerSinglePieAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 500, height: 350, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/story-label-item.md b/docs/assets/examples/zh/character/story-label-item.md index 8c4ba716..68340453 100644 --- a/docs/assets/examples/zh/character/story-label-item.md +++ b/docs/assets/examples/zh/character/story-label-item.md @@ -24,7 +24,7 @@ VStory.registerAll(); VStory.registerLabelItem(); VStory.registerLabelItemAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#18253A' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 750, height: 450, scaleX: 'auto', scaleY: 'auto', background: '#18253A' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/timeline.md b/docs/assets/examples/zh/character/timeline.md index d69234b5..ad31ece2 100644 --- a/docs/assets/examples/zh/character/timeline.md +++ b/docs/assets/examples/zh/character/timeline.md @@ -94,7 +94,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 600, height: 300, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/unit.md b/docs/assets/examples/zh/character/unit.md index 2a164ada..b74e569d 100644 --- a/docs/assets/examples/zh/character/unit.md +++ b/docs/assets/examples/zh/character/unit.md @@ -151,7 +151,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/vchart.md b/docs/assets/examples/zh/character/vchart.md index beda0b7c..880675d8 100644 --- a/docs/assets/examples/zh/character/vchart.md +++ b/docs/assets/examples/zh/character/vchart.md @@ -162,7 +162,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/vgraphic.md b/docs/assets/examples/zh/character/vgraphic.md index 7605194b..16e63239 100644 --- a/docs/assets/examples/zh/character/vgraphic.md +++ b/docs/assets/examples/zh/character/vgraphic.md @@ -63,7 +63,7 @@ const characterList = [ { type:'Shape', options: shape, effect: 'clipRange' } ] -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/character/wave-scatter.md b/docs/assets/examples/zh/character/wave-scatter.md index 536cc968..716325f1 100644 --- a/docs/assets/examples/zh/character/wave-scatter.md +++ b/docs/assets/examples/zh/character/wave-scatter.md @@ -86,7 +86,7 @@ const dsl = { ], }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0' }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 400, height: 400, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/templates/unit-visualize-template.md b/docs/assets/examples/zh/templates/unit-visualize-template.md index cda9590b..f6bf1167 100644 --- a/docs/assets/examples/zh/templates/unit-visualize-template.md +++ b/docs/assets/examples/zh/templates/unit-visualize-template.md @@ -32,8 +32,8 @@ data.sort((d1, d2) => { }); const spec = { layout: { - width: 1550, - height: 800, + width: 1920, + height: 1080, viz: { padding: { top: 0 @@ -152,7 +152,7 @@ const spec = { } const dsl = VStory.createUnitTemplate(spec); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.35, scaleY: 0.35 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1920, height: 1080, scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/works-show/annotation-show.md b/docs/assets/examples/zh/works-show/annotation-show.md index c20f985a..5981b9d7 100644 --- a/docs/assets/examples/zh/works-show/annotation-show.md +++ b/docs/assets/examples/zh/works-show/annotation-show.md @@ -23,7 +23,7 @@ VStory.registerLabelItemAction(); VStory.registerPopTip(); VStory.registerPopTipAction(); -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 1080, height: 720, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/works-show/chart-join.md b/docs/assets/examples/zh/works-show/chart-join.md index a5057bb0..067d5080 100644 --- a/docs/assets/examples/zh/works-show/chart-join.md +++ b/docs/assets/examples/zh/works-show/chart-join.md @@ -77,7 +77,7 @@ const getChartSpec = (i, showLeftAxis) => { }; } -const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000 / 2, height: 800 / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, width: 2000, height: 800, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/works-show/national-memorial.md b/docs/assets/examples/zh/works-show/national-memorial.md index 5a6e0246..10a7605d 100644 --- a/docs/assets/examples/zh/works-show/national-memorial.md +++ b/docs/assets/examples/zh/works-show/national-memorial.md @@ -1589,7 +1589,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: width / 2, height: height / 2, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width, height, scaleX: 'auto', scaleY: 'auto', background: '#ebecf0' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/works-show/unit-gun-death.md b/docs/assets/examples/zh/works-show/unit-gun-death.md index 57e76b34..5fcf0d2d 100644 --- a/docs/assets/examples/zh/works-show/unit-gun-death.md +++ b/docs/assets/examples/zh/works-show/unit-gun-death.md @@ -356,7 +356,7 @@ const dsl = VStory.createUnitTemplate(spec); console.log(dsl); -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', width: 1550, height: 800, scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/docs/assets/examples/zh/works-show/visualize-history.md b/docs/assets/examples/zh/works-show/visualize-history.md index b6950295..026cdc6f 100644 --- a/docs/assets/examples/zh/works-show/visualize-history.md +++ b/docs/assets/examples/zh/works-show/visualize-history.md @@ -13690,7 +13690,7 @@ const dsl = { ] }; -const story = new VStory.Story(dsl, { dom: CONTAINER_ID, background: '#ebecf0', scaleX: 0.5, scaleY: 0.5 }); +const story = new VStory.Story(dsl, { dom: CONTAINER_ID, width: 1280, height: 720, background: '#ebecf0', scaleX: 'auto', scaleY: 'auto' }); const player = new VStory.Player(story); story.init(player); diff --git a/packages/vstory-animate/package.json b/packages/vstory-animate/package.json index 3e3ecd70..3230a1fb 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.3", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-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 ac5544e1..73903daa 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.3", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-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/src/character/chart/character-chart.ts b/packages/vstory-core/src/character/chart/character-chart.ts index 97234311..00c7d0b3 100644 --- a/packages/vstory-core/src/character/chart/character-chart.ts +++ b/packages/vstory-core/src/character/chart/character-chart.ts @@ -95,16 +95,21 @@ export class CharacterChart match: boolean = true ) { if (select[0] === '#') { - return this.selectByName(seriesList, componentsList, select, match); + return this.selectByNameOrUserId(seriesList, componentsList, select, match); } return this.selectByType(seriesList, componentsList, select, match); } - protected selectByName(seriesList: ISeries[], componentsList: IComponent[], select: string, match: boolean = true) { + protected selectByNameOrUserId( + seriesList: ISeries[], + componentsList: IComponent[], + select: string, + match: boolean = true + ) { const name = select.substring(1); return { - seriesList: seriesList.filter(item => (item.name === name) === match), - componentsList: componentsList.filter(item => (item.name === name) === match) + seriesList: seriesList.filter(item => (item.name === name || item.userId === name) === match), + componentsList: componentsList.filter(item => (item.name === name || item.userId === name) === match) }; } diff --git a/packages/vstory-core/src/character/chart/runtime/label-style.ts b/packages/vstory-core/src/character/chart/runtime/label-style.ts index c9f5ba8c..25707f7c 100644 --- a/packages/vstory-core/src/character/chart/runtime/label-style.ts +++ b/packages/vstory-core/src/character/chart/runtime/label-style.ts @@ -2,7 +2,8 @@ import { array, isValid, merge } from '@visactor/vutils'; import type { IChartCharacterRuntime } from '../interface/runtime'; import type { ICharacterChart } from '../interface/character-chart'; import type { ISeries, IVChart } from '@visactor/vchart'; -import type { ILabelInfo, Label as VChartLabelComponent } from '@visactor/vchart/esm/component/label/label'; +import type { Label as VChartLabelComponent } from '@visactor/vchart/esm/component/label/label'; +import type { ILabelInfo } from '@visactor/vchart/esm/component/label'; import { MarkStyleRuntime } from './mark-style'; import { getSeriesKeyScalesMap, isSeriesMatch, matchDatumWithScaleMap } from './utils'; import type { IGraphic } from '@visactor/vrender-core'; diff --git a/packages/vstory-core/src/core/action-processor.ts b/packages/vstory-core/src/core/action-processor.ts index d00ebeb1..5e199eea 100644 --- a/packages/vstory-core/src/core/action-processor.ts +++ b/packages/vstory-core/src/core/action-processor.ts @@ -83,8 +83,8 @@ export class ActionProcessor implements IActionProcessor { applyAppearAttrs(name: string, actionName: string, character: ICharacter, actionSpec: IActionSpec) { const processor = this.getProcessor(name, actionName); - if (processor && processor.applyAttrs) { - return processor.applyAttrs(character, actionSpec); + if (processor && processor.applyAttrsForVisibility) { + return processor.applyAttrsForVisibility(character, actionSpec); } return undefined; } diff --git a/packages/vstory-core/src/core/canvas.ts b/packages/vstory-core/src/core/canvas.ts index 3b53f334..6bb59ade 100644 --- a/packages/vstory-core/src/core/canvas.ts +++ b/packages/vstory-core/src/core/canvas.ts @@ -40,6 +40,7 @@ export class StoryCanvas implements IStoryCanvas { ) { this._story = story; this._container = params.container; + this._canvas = params.canvas as any; const { canvas, @@ -127,8 +128,16 @@ export class StoryCanvas implements IStoryCanvas { if (!Number.isFinite(width) || !Number.isFinite(height)) { scaleX = scaleY = 1; } else { - const clipWidth = this._container ? this._container.clientWidth : this._canvas.width / this.getDpr(); - const clipHeight = this._container ? this._container.clientHeight : this._canvas.height / this.getDpr(); + const clipWidth = this._container + ? this._container.clientWidth + : this._canvas?.width / vglobal.devicePixelRatio; + const clipHeight = this._container + ? this._container.clientHeight + : this._canvas?.height / vglobal.devicePixelRatio; + if (!isValidNumber(clipWidth) || !isValidNumber(clipHeight)) { + scaleX = scaleY = 1; + return { scaleX, scaleY, width, height }; + } const clipAspectRatio = clipWidth / clipHeight; const contentAspectRatio = width / height; diff --git a/packages/vstory-core/src/interface/action-processor.ts b/packages/vstory-core/src/interface/action-processor.ts index d11b1864..34e80886 100644 --- a/packages/vstory-core/src/interface/action-processor.ts +++ b/packages/vstory-core/src/interface/action-processor.ts @@ -8,7 +8,7 @@ export interface IActionProcessorItem { getStartTimeAndDuration: (action: IActionSpec, character?: ICharacter) => { startTime: number; duration: number }; run: (...actionParams: any) => any; - applyAttrs?: (...actionParams: any) => any; + applyAttrsForVisibility?: (...actionParams: any) => any; } export interface IActionProcessor extends IReleaseable { diff --git a/packages/vstory-editor/package.json b/packages/vstory-editor/package.json index 38daa120..682b984a 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.3", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-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 6b903908..dea54c78 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.3", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-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-player/package.json b/packages/vstory-player/package.json index 7a12a2a5..e1946b0e 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.3", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-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-player/src/processor/chart/transformFunc/seriesmark/transformLineVisibility.ts b/packages/vstory-player/src/processor/chart/transformFunc/seriesmark/transformLineVisibility.ts index 69e5308e..0236710b 100644 --- a/packages/vstory-player/src/processor/chart/transformFunc/seriesmark/transformLineVisibility.ts +++ b/packages/vstory-player/src/processor/chart/transformFunc/seriesmark/transformLineVisibility.ts @@ -1,6 +1,35 @@ import type VChart from '@visactor/vchart'; import { commonFade, commonGrow } from './commonTransformMarkAppear'; import type { IChartVisibilityPayload } from '../../interface'; +import type { ICharacter } from '@visactor/vstory-core'; +import { getCustomParams } from './utils'; + +export const growPoints = ( + instance: VChart, + animation: IChartVisibilityPayload['animation'], + option: { markIndex: number; disappear: boolean; character?: ICharacter } +) => { + const { duration, oneByOne, easing } = getCustomParams( + animation, + animation.delayPerTime ?? 30, + animation.enterPerTime ?? 200 + ); + const { params = {} } = animation; + const { disappear, character } = option; + if (disappear || !character) { + return commonFade(instance, animation, option); + } + + return { + type: params.direction === 'horizontal' ? 'growPointsXIn' : 'growPointsYIn', + options: { + orient: params.direction === 'horizontal' ? 'positive' : 'negative' + }, + duration, + oneByOne, + easing + }; +}; export const transformLineVisibility = ( instance: VChart, @@ -14,6 +43,9 @@ export const transformLineVisibility = ( case 'fade': { return commonFade(instance, animation, option); } + case 'growPoints': { + return growPoints(instance, animation, option); + } default: { return commonFade(instance, animation, option); } diff --git a/packages/vstory-player/src/processor/chart/visibility.ts b/packages/vstory-player/src/processor/chart/visibility.ts index edc38483..f5f7913d 100644 --- a/packages/vstory-player/src/processor/chart/visibility.ts +++ b/packages/vstory-player/src/processor/chart/visibility.ts @@ -15,7 +15,7 @@ import { VChartAddActionProcessor } from './add'; import { CommonStyleActionProcessor } from '../component/common/style'; export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; protected character: ICharacter | null; constructor() { @@ -24,6 +24,15 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { run(character: ICharacter, actionSpec: IChartVisibilityAction): void { super.preRun(character, actionSpec); + this.runOrApplyAttrs(character, actionSpec, { isRun: true }); + } + + applyAttrsForVisibility(character: ICharacter, actionSpec: IChartVisibilityAction): void { + this.runOrApplyAttrs(character, actionSpec, { isRun: false }); + } + + protected runOrApplyAttrs(character: ICharacter, actionSpec: IChartVisibilityAction, params: { isRun?: boolean }) { + const { isRun = true } = params; this.character = character; const vchart = character.graphic._vchart as IVChart; // 基于选择器做筛选 @@ -37,20 +46,20 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { const { chart, seriesList, componentsList, panel } = this.selectBySelector(payload.selector ?? '*', character); if (!runnedChart && chart) { // chart & panel - this.chartVisibility(character.graphic as any, actionSpec.action, payload); + this.chartVisibility(character.graphic as any, actionSpec.action, payload, isRun); } else if (!runnedChart && panel) { // panel - this.panelVisibility(character.graphic as any, actionSpec.action, payload); + this.panelVisibility(character.graphic as any, actionSpec.action, payload, isRun); } // 过滤seriesList const shouldRunSeriesList = seriesList.filter(item => !runnedSeriesSet.has(item)); shouldRunSeriesList.forEach(series => { - this.commonSeriesAppear(vchart, series, actionSpec.action, payload); + this.commonSeriesAppear(vchart, series, actionSpec.action, payload, isRun); }); // 过滤componentsList const shouldRunComponentsList = componentsList.filter(item => !runnedComponentsSet.has(item)); shouldRunComponentsList.forEach(component => { - this.componentAppear(vchart, component, actionSpec.action, payload); + this.componentAppear(vchart, component, actionSpec.action, payload, isRun); }); runnedChart = runnedChart || chart; seriesList.forEach(item => runnedSeriesSet.add(item)); @@ -59,13 +68,29 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { this.character = null; } - protected chartVisibility(chartGraphic: any, action: 'appear' | 'disappear', payload: IChartVisibilityPayload) { + protected chartVisibility( + chartGraphic: any, + action: 'appear' | 'disappear', + payload: IChartVisibilityPayload, + isRun: boolean + ) { + if (!isRun) { + return; + } const appearTransformFunc = transformMap.appear.chart; const defaultPayload = VChartVisibilityActionProcessor.fadePayload; this.runTransformFunc(chartGraphic as any, appearTransformFunc, action, payload, defaultPayload); } - protected panelVisibility(chartGraphic: any, action: 'appear' | 'disappear', payload: IChartVisibilityPayload) { + protected panelVisibility( + chartGraphic: any, + action: 'appear' | 'disappear', + payload: IChartVisibilityPayload, + isRun: boolean + ) { + if (!isRun) { + return; + } const appearTransformFunc = transformMap.appear.panel; const defaultPayload = VChartVisibilityActionProcessor.fadePayload; this.runTransformFunc(chartGraphic as any, appearTransformFunc, action, payload, defaultPayload); @@ -75,16 +100,17 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, component: IComponent, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { if (component.specKey === 'label') { - this.labelComponentAppear(vchart, component, action, payload); + this.labelComponentAppear(vchart, component, action, payload, isRun); } else if (component.specKey === 'legends') { - this.legendsComponentAppear(vchart, component, action, payload); + this.legendsComponentAppear(vchart, component, action, payload, isRun); } else if (component.specKey === 'axes') { - this.axisComponentAppear(vchart, component, action, payload); + this.axisComponentAppear(vchart, component, action, payload, isRun); } else if (component.specKey === 'title') { - this.titleComponentAppear(vchart, component, action, payload); + this.titleComponentAppear(vchart, component, action, payload, isRun); } } @@ -92,13 +118,19 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, component: IComponent, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const vrenderComponents = component.getVRenderComponents(); const appearTransformFunc = transformMap.appear.label; const defaultPayload = VChartVisibilityActionProcessor.defaultPayload; vrenderComponents.forEach(group => { - this.runTransformFunc(group as any, appearTransformFunc, action, payload, defaultPayload); + if (isRun) { + (group.attribute as any).visibleAll = true; + this.runTransformFunc(group as any, appearTransformFunc, action, payload, defaultPayload); + } else { + (group.attribute as any).visibleAll = false; + } }); } @@ -106,13 +138,19 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, component: IComponent, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { - const vrenderComponents = component.getVRenderComponents(); + const vrenderComponents = component.getVRenderComponents().filter((item: any) => !!item); const appearTransformFunc = transformMap.appear.legends; const defaultPayload = VChartVisibilityActionProcessor.fadePayload; vrenderComponents.forEach(group => { - this.runTransformFunc(group as any, appearTransformFunc, action, payload, defaultPayload); + if (isRun) { + (group.attribute as any).visibleAll = true; + this.runTransformFunc(group as any, appearTransformFunc, action, payload, defaultPayload); + } else { + (group.attribute as any).visibleAll = false; + } }); } @@ -120,19 +158,31 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, component: IComponent, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const vrenderComponents = component.getVRenderComponents(); const axis = vrenderComponents[0]; if (!axis) { return; } + // debugger; + vrenderComponents.forEach(c => { + if (isRun) { + (c.attribute as any).visibleAll = true; + } else { + (c.attribute as any).visibleAll = false; + } + }); + if (!isRun) { + return; + } const axisGrid = vrenderComponents[1]; const axisOrient = (axis.attribute as AxisBaseAttributes)?.orient; if (axisOrient === 'angle' || axisOrient === 'radius') { - this.polarAxisAppear(axis, axisGrid, action, payload); + this.polarAxisAppear(axis, axisGrid, action, payload, isRun); } else { - this.cartesianAxisAppear(axis, axisGrid, action, payload); + this.cartesianAxisAppear(axis, axisGrid, action, payload, isRun); } } @@ -140,7 +190,8 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { axis: any, axisGrid: any, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const axisOrient = (axis.attribute as AxisBaseAttributes)?.orient; const axisItems = (axis.attribute as AxisBaseAttributes)?.items ?? [[]]; @@ -165,7 +216,8 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { axis: any, axisGrid: any, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const axisItems = (axis.attribute as AxisBaseAttributes)?.items ?? [[]]; const appearTransformFunc = transformMap.appear.axis; @@ -182,7 +234,8 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, component: IComponent, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const vrenderComponents = component.getVRenderComponents(); const appearTransformFunc = transformMap.appear.title; @@ -214,7 +267,8 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { vchart: IVChart, series: ISeries, action: 'appear' | 'disappear', - payload: IChartVisibilityPayload + payload: IChartVisibilityPayload, + isRun: boolean ) { const marks = series.getMarksWithoutRoot(); if (!marks.length) { @@ -223,8 +277,13 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor { marks.forEach((mark, markIndex) => { const config = this.getMarkAnimateConfig(vchart, mark, markIndex, action, series, payload); const product = mark.getProduct(); - // @ts-ignore - product && product.animate && product.animate.run(config || {}); + if (isRun) { + // @ts-ignore + product?.graphicItem?.setAttribute('visibleAll', true); + product?.animate?.run(config || {}); + } else { + product?.graphicItem?.setAttribute('visibleAll', false); + } }); } diff --git a/packages/vstory-player/src/processor/component/common/visibility.ts b/packages/vstory-player/src/processor/component/common/visibility.ts index 48309920..4408aeef 100644 --- a/packages/vstory-player/src/processor/component/common/visibility.ts +++ b/packages/vstory-player/src/processor/component/common/visibility.ts @@ -44,7 +44,7 @@ export class CommonVisibilityActionProcessor extends ActionProcessorItem { }); } - applyAttrs(character: ICharacter, actionSpec: IActionSpec): void { + applyAttrsForVisibility(character: ICharacter, actionSpec: IActionSpec): void { const { animation = {}, selector } = getPayload(actionSpec); const { effect = 'default' } = animation as any; array(effect).forEach(_effect => { diff --git a/packages/vstory-player/src/processor/component/image/image-visibility.ts b/packages/vstory-player/src/processor/component/image/image-visibility.ts index 3744f5d7..97212608 100644 --- a/packages/vstory-player/src/processor/component/image/image-visibility.ts +++ b/packages/vstory-player/src/processor/component/image/image-visibility.ts @@ -7,7 +7,7 @@ import { CommonScaleToActionProcessor } from '../common/scale'; import { CommonBounceActionProcessor } from '../common/bounce'; export class ImageVisibilityActionProcessor extends CommonVisibilityActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; } export function registerImageVisibilityAction() { diff --git a/packages/vstory-player/src/processor/component/line/line-visibility.ts b/packages/vstory-player/src/processor/component/line/line-visibility.ts index e75996c1..dae2ea93 100644 --- a/packages/vstory-player/src/processor/component/line/line-visibility.ts +++ b/packages/vstory-player/src/processor/component/line/line-visibility.ts @@ -7,7 +7,7 @@ import { CommonScaleToActionProcessor } from '../common/scale'; import { CommonBounceActionProcessor } from '../common/bounce'; import { clipRangeInstance } from '../../common/clipRange-processor'; export class LineVisibilityActionProcessor extends CommonVisibilityActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; getEffectInstance(effect: string, appear: boolean) { switch (effect) { diff --git a/packages/vstory-player/src/processor/component/rect/rect-visibility.ts b/packages/vstory-player/src/processor/component/rect/rect-visibility.ts index 7714a492..88d6a56b 100644 --- a/packages/vstory-player/src/processor/component/rect/rect-visibility.ts +++ b/packages/vstory-player/src/processor/component/rect/rect-visibility.ts @@ -7,7 +7,7 @@ import { CommonScaleToActionProcessor } from '../common/scale'; import { CommonBounceActionProcessor } from '../common/bounce'; export class RectVisibilityActionProcessor extends CommonVisibilityActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; } export function registerRectVisibilityAction() { diff --git a/packages/vstory-player/src/processor/component/shape/shape-visibility.ts b/packages/vstory-player/src/processor/component/shape/shape-visibility.ts index ae4c498b..b29407b0 100644 --- a/packages/vstory-player/src/processor/component/shape/shape-visibility.ts +++ b/packages/vstory-player/src/processor/component/shape/shape-visibility.ts @@ -8,7 +8,7 @@ import { CommonBounceActionProcessor } from '../common/bounce'; import { clipRangeInstance } from '../../common/clipRange-processor'; export class ShapeVisibilityActionProcessor extends CommonVisibilityActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; getEffectInstance(effect: string, appear: boolean) { switch (effect) { diff --git a/packages/vstory-player/src/processor/component/text/text-visibility.ts b/packages/vstory-player/src/processor/component/text/text-visibility.ts index 740b5674..4db28830 100644 --- a/packages/vstory-player/src/processor/component/text/text-visibility.ts +++ b/packages/vstory-player/src/processor/component/text/text-visibility.ts @@ -47,7 +47,7 @@ export class TypeWriterVisibility extends BaseVisibility { const typewriterIn = new TypeWriterVisibility(); export class TextVisibilityActionProcessor extends CommonVisibilityActionProcessor { - name: 'appearOrDisAppear'; + name: 'appearOrDisAppear' = 'appearOrDisAppear'; constructor() { super(); } diff --git a/packages/vstory-templates/package.json b/packages/vstory-templates/package.json index 54a3b15e..47bd6a5a 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.3", + "@visactor/vchart": "1.13.2-vstory.2", "@visactor/vtable": "1.10.1", - "@visactor/vrender": "0.21.2-vstory.3", - "@visactor/vrender-core": "0.21.2-vstory.3", - "@visactor/vrender-kits": "0.21.2-vstory.3", - "@visactor/vrender-components": "0.21.2-vstory.3", + "@visactor/vrender": "0.21.5-vstory.2", + "@visactor/vrender-core": "0.21.5-vstory.2", + "@visactor/vrender-kits": "0.21.5-vstory.2", + "@visactor/vrender-components": "0.21.5-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 2676a073..9882adea 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -16,7 +16,7 @@ import { UnitInfographic } from './demos/works/unit-infographic'; import { VChartSiteDemo } from './demos/works/website/VChartSite'; import { TimelineAnimate } from './demos/component/timeline'; import { BasicUnit } from './demos/component/basic-unit'; -import { BarChart2 } from './demos/BarChart2'; +import { BarChart2 } from './demos/arrange/BarChart2'; import { UnitTemplate1 } from './demos/templates/unit-template1'; import { VScreen } from './demos/works/vscreen'; import { Lottie } from './demos/component/lottie'; @@ -48,6 +48,8 @@ import { MarketingWordcloud } from './demos/infographic/marking-wordcloud'; // VchartEditor Runtime import { RuntimeSeriesMark } from './demos/runtime/series-mark'; import { RuntimeLabelStyle } from './demos/runtime/label-style'; +import { LineChartArrange } from './demos/arrange/LineChart'; +import { PieChart } from './demos/arrange/PieChart'; type MenusType = ( | { @@ -99,6 +101,14 @@ const App = () => { name: 'BarChart1', component: BarChart1 }, + { + name: 'LineChartArrange', + component: LineChartArrange + }, + { + name: 'PieChart', + component: PieChart + }, { name: 'BarChart2', component: BarChart2 diff --git a/packages/vstory/demo/src/demos/API.tsx b/packages/vstory/demo/src/demos/API.tsx index 7b4c2fc1..26cc9a4c 100644 --- a/packages/vstory/demo/src/demos/API.tsx +++ b/packages/vstory/demo/src/demos/API.tsx @@ -14,6 +14,7 @@ export const API = () => { 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' }); diff --git a/packages/vstory/demo/src/demos/BarChart2.tsx b/packages/vstory/demo/src/demos/arrange/BarChart2.tsx similarity index 81% rename from packages/vstory/demo/src/demos/BarChart2.tsx rename to packages/vstory/demo/src/demos/arrange/BarChart2.tsx index 6316cb53..8011e842 100644 --- a/packages/vstory/demo/src/demos/BarChart2.tsx +++ b/packages/vstory/demo/src/demos/arrange/BarChart2.tsx @@ -1,6 +1,6 @@ import React, { createRef, useEffect } from 'react'; -import { Player, Story, initVR, registerGraphics, registerCharacters } from '../../../../vstory-core/src'; -import { registerVComponentAction, registerVChartAction } from '../../../../vstory-player/src'; +import { Player, Story, initVR, registerGraphics, registerCharacters } from '../../../../../vstory-core/src'; +import { registerVComponentAction, registerVChartAction } from '../../../../../vstory-player/src'; registerGraphics(); registerCharacters(); @@ -58,7 +58,7 @@ export const BarChart2 = () => { type: 'bar', id: 'bar', dataIndex: 0, - label: { visible: true }, + label: { visible: false }, seriesField: 'type', dataIndex: 0, xField: ['x', 'type'], @@ -68,7 +68,7 @@ export const BarChart2 = () => { type: 'line', id: 'line', dataIndex: 1, - label: { visible: true }, + label: { visible: false }, seriesField: 'type', xField: 'x', yField: 'y', @@ -76,8 +76,14 @@ export const BarChart2 = () => { } ], axes: [ - { orient: 'left', seriesIndex: [0] }, - { orient: 'right', seriesId: ['line'], grid: { visible: false } }, + { + orient: 'left', + id: 'axes-left', + domainLine: { visible: true }, + seriesId: ['line'], + grid: { visible: false } + }, + { orient: 'right', id: 'axes-right', domainLine: { visible: true }, seriesId: ['bar'], seriesIndex: [0] }, { orient: 'bottom', label: { visible: true }, type: 'band' } ], legends: { @@ -94,7 +100,7 @@ export const BarChart2 = () => { position: { top: 50, left: 50, - width: 300, + width: 500, height: 300 }, options: { @@ -125,7 +131,7 @@ export const BarChart2 = () => { action: 'appear', payload: [ { - selector: ':not(bar)', + selector: ':not(bar) :not(#axes-right)', animation: { duration: 2000, easing: 'linear' @@ -134,13 +140,26 @@ export const BarChart2 = () => { ] }, { - startTime: 2000, + startTime: 3000, action: 'appear', payload: [ { selector: 'bar', animation: { - duration: 2000, + duration: 800, + easing: 'linear' + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + selector: '#axes-right', + animation: { + duration: 800, easing: 'linear' } } diff --git a/packages/vstory/demo/src/demos/arrange/LineChart.tsx b/packages/vstory/demo/src/demos/arrange/LineChart.tsx new file mode 100644 index 00000000..f9fb5dd3 --- /dev/null +++ b/packages/vstory/demo/src/demos/arrange/LineChart.tsx @@ -0,0 +1,209 @@ +import React, { createRef, useEffect } from 'react'; +import { Player, Story, initVR, registerGraphics, registerCharacters } from '../../../../../vstory-core/src'; +import { registerVComponentAction, registerVChartAction } from '../../../../../vstory-player/src'; + +registerGraphics(); +registerCharacters(); +registerVChartAction(); +registerVComponentAction(); +initVR(); + +export const LineChartArrange = () => { + const id = 'LineChartArrange'; + + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + const typeList = [ + 'Nail polish', + 'Eyebrow pencil', + 'Rouge', + 'Lipstick', + 'Eyeshadows', + 'Eyeliner', + 'Foundation', + 'Lip gloss', + 'Mascara' + ]; + const USA = typeList.map((item, i) => ({ + type: item, + country: 'USA', + value: Math.random() * 1000 + })); + const EU = typeList.map((item, i) => ({ + type: item, + country: 'EU', + value: 1000 + Math.random() * 1000 + })); + const China = typeList.map((item, i) => ({ + type: item, + country: 'China', + value: 2000 + Math.random() * 1000 + })); + const Africa = typeList.map((item, i) => ({ + type: item, + country: 'Africa', + value: 3000 + Math.random() * 1000 + })); + + const spec = { + type: 'common', + series: [USA, EU, China, Africa].map((item, i) => ({ + type: 'line', + id: 'line' + i, + data: { + id: '' + i, + values: item + }, + point: { + visible: false + }, + xField: 'type', + yField: 'value' + })), + axes: [ + { + orient: 'left', + type: 'linear' + }, + { + orient: 'bottom', + type: 'band' + } + ] + }; + + console.log(spec); + + const dsl = { + characters: [ + { + type: 'VChart', + id: 'bar-line-series', + position: { + top: 50, + left: 50, + width: 500, + height: 300 + }, + options: { + spec, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4, + cornerRadius: 8 + } + } + } + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + { + id: 'scene0', + actions: [ + { + characterId: 'bar-line-series', + characterActions: [ + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: ':not(line)', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 0, + action: 'appear', + payload: [ + { + selector: '#line0', + animation: { + duration: 1000, + easing: 'linear' + } + } + ] + }, + { + startTime: 1000, + action: 'appear', + payload: [ + { + selector: '#line1', + animation: { + duration: 1000, + easing: 'linear', + effect: 'fade' + } + } + ] + }, + { + startTime: 2000, + action: 'appear', + payload: [ + { + selector: '#line2', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'vertical' + } + } + } + ] + }, + { + startTime: 3000, + action: 'appear', + payload: [ + { + selector: '#line3', + animation: { + duration: 600, + easing: 'linear', + effect: 'growPoints', + params: { + direction: 'horizontal' + } + } + } + ] + } + ] + } + ] + } + ] + } + ] + }; + + const story = new Story(dsl, { canvas, width: 800, height: 500, background: 'pink' }); + const player = new Player(story); + story.init(player); + console.log(story); + player.play(0); + + return () => { + story.release(); + }; + }, []); + + return
; +}; diff --git a/packages/vstory/demo/src/demos/arrange/PieChart.tsx b/packages/vstory/demo/src/demos/arrange/PieChart.tsx new file mode 100644 index 00000000..d8c643f9 --- /dev/null +++ b/packages/vstory/demo/src/demos/arrange/PieChart.tsx @@ -0,0 +1,116 @@ +import React, { createRef, useEffect } from 'react'; +import { Player, Story, initVR, registerGraphics, registerCharacters } from '../../../../../vstory-core/src'; +import { registerVComponentAction, registerVChartAction } from '../../../../../vstory-player/src'; +import { exportVideo } from '../utils'; + +registerGraphics(); +registerCharacters(); +registerVChartAction(); +registerVComponentAction(); +initVR(); + +export const PieChart = () => { + const id = 'PieChart'; + + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + const spec = { + type: 'pie', + background: 'transparent', + data: [ + { + id: 'id0', + values: [ + { type: 'oxygen', value: '46.60' }, + { type: 'silicon', value: '27.72' }, + { type: 'aluminum', value: '8.13' }, + { type: 'iron', value: '5' }, + { type: 'calcium', value: '3.63' }, + { type: 'sodium', value: '2.83' }, + { type: 'potassium', value: '2.59' }, + { type: 'others', value: '3.5' } + ] + } + ], + outerRadius: 0.8, + innerRadius: 0.6, + valueField: 'value', + categoryField: 'type', + animation: false, + label: { + visible: true, + animation: false, + animationAppear: false, + style: { + fill: 'red' + } + } + }; + + const dsl = { + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: '0', + characterActions: [ + { + action: 'appear', + startTime: 0, + payload: { + animation: { + duration: 1000, + easing: 'cubicOut', + fade: { + opacity: 1, + easing: 'linear' + } + } + } + } + ] + } + ] + } + ] + } + ], + characters: [ + { + type: 'VChart', + id: `0`, + zIndex: 1, + position: { + top: 0, + left: 0, + width: 600, + height: 600 + }, + options: { + spec + } + } + ] + }; + + const story = new Story(dsl, { canvas, width: 600, height: 600, background: 'transparent' }); + const player = new Player(story); + story.init(player); + console.log(story); + player.play(0); + exportVideo(story); + + return () => { + story.release(); + }; + }, []); + + return
; +}; diff --git a/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx b/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx index d4aa89d6..97a27715 100644 --- a/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx +++ b/packages/vstory/demo/src/demos/infographic/bar-hiv.tsx @@ -8,6 +8,8 @@ export const BarHIV = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const bg = (index: number, fill: string, y: number, height: number, _graphic: any = {}) => { diff --git a/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx b/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx index 31a57561..495d8da9 100644 --- a/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx +++ b/packages/vstory/demo/src/demos/infographic/bar-work-in-same-industry.tsx @@ -8,6 +8,8 @@ export const BarWorkingInSameIndustry = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx index c1d62893..247abd4d 100644 --- a/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx +++ b/packages/vstory/demo/src/demos/infographic/big-data-wordcloud.tsx @@ -496,6 +496,8 @@ export const BigDataWordCloud = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx b/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx index 4f86125f..95307985 100644 --- a/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx +++ b/packages/vstory/demo/src/demos/infographic/cancer-usa.tsx @@ -87,6 +87,8 @@ export const CancerUSA = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); let _story: any; diff --git a/packages/vstory/demo/src/demos/infographic/dapanji.tsx b/packages/vstory/demo/src/demos/infographic/dapanji.tsx index 0fa298ee..46d2b7b7 100644 --- a/packages/vstory/demo/src/demos/infographic/dapanji.tsx +++ b/packages/vstory/demo/src/demos/infographic/dapanji.tsx @@ -8,6 +8,8 @@ export const Dapanji = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/famous-travel.tsx b/packages/vstory/demo/src/demos/infographic/famous-travel.tsx index 9790ff16..3020062d 100644 --- a/packages/vstory/demo/src/demos/infographic/famous-travel.tsx +++ b/packages/vstory/demo/src/demos/infographic/famous-travel.tsx @@ -8,6 +8,8 @@ export const FamousTravel = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/infographic.tsx b/packages/vstory/demo/src/demos/infographic/infographic.tsx index bd4c4863..7b1221ea 100644 --- a/packages/vstory/demo/src/demos/infographic/infographic.tsx +++ b/packages/vstory/demo/src/demos/infographic/infographic.tsx @@ -8,6 +8,8 @@ export const Infographic = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/insta.tsx b/packages/vstory/demo/src/demos/infographic/insta.tsx index ada11983..6800e8e7 100644 --- a/packages/vstory/demo/src/demos/infographic/insta.tsx +++ b/packages/vstory/demo/src/demos/infographic/insta.tsx @@ -8,6 +8,8 @@ export const Insta = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const colors = ['#5C95FF', '#B9E6FF', '#FFA9A3', '#F87575', '#7E6C6C']; diff --git a/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx index 0303d633..94f0b838 100644 --- a/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx +++ b/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx @@ -8,6 +8,8 @@ export const MarketingWordcloud = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const chartPath = diff --git a/packages/vstory/demo/src/demos/infographic/project-goal.tsx b/packages/vstory/demo/src/demos/infographic/project-goal.tsx index fa3dabb7..9cb89a24 100644 --- a/packages/vstory/demo/src/demos/infographic/project-goal.tsx +++ b/packages/vstory/demo/src/demos/infographic/project-goal.tsx @@ -8,6 +8,8 @@ export const ProjectGoal = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx b/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx index 75965eed..aac5a5bf 100644 --- a/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx +++ b/packages/vstory/demo/src/demos/infographic/ready-to-eat.tsx @@ -8,6 +8,8 @@ export const ReadyToEat = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx index aba0768f..cb47d27b 100644 --- a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx +++ b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx @@ -8,6 +8,8 @@ export const AreaChart = () => { useEffect(() => { const container = document.getElementById(id); const canvas = document.createElement('canvas'); + canvas.width = 2000; + canvas.height = 1000; container?.appendChild(canvas); const dsl = { diff --git a/packages/vstory/demo/src/demos/works/NationalMemorial.tsx b/packages/vstory/demo/src/demos/works/NationalMemorial.tsx index 29bdd527..8dc88e2b 100644 --- a/packages/vstory/demo/src/demos/works/NationalMemorial.tsx +++ b/packages/vstory/demo/src/demos/works/NationalMemorial.tsx @@ -1,11 +1,10 @@ import React, { useEffect } from 'react'; import { Player, Story } from '../../../../../vstory-core/src'; -import { registerAll } from '../../../../../vstory/src'; +import { Easing, generatorPathEasingFunc, registerAll } from '../../../../../vstory/src'; import darkBg from '../../assets/nationalMemory/dark.jpeg'; import candle from '../../assets/nationalMemory/candle.png'; import monument from '../../assets/nationalMemory/monument.png'; import { merge } from '@visactor/vutils'; -import { generatorPathEasingFunc, Easing } from '@visactor/vrender'; import { exportVideo } from '../utils'; registerAll(); diff --git a/packages/vstory/demo/src/demos/works/website/VChartSite.tsx b/packages/vstory/demo/src/demos/works/website/VChartSite.tsx index d6bb8cba..a86ef71a 100644 --- a/packages/vstory/demo/src/demos/works/website/VChartSite.tsx +++ b/packages/vstory/demo/src/demos/works/website/VChartSite.tsx @@ -44,10 +44,10 @@ export const VChartSiteDemo = () => { { id: 'default-chapter', scenes: [ - // scene1, - // scene2, - // scene3, - // scene4, + scene1, + scene2, + scene3, + scene4, scene5, scene6, scene7,