diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json
index 333d8ab6..5a53c52b 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.19.20-alpha.2",
- "@visactor/vrender-core": "0.19.20-alpha.2",
- "@visactor/vrender-kits": "0.19.20-alpha.2",
- "@visactor/vrender-components": "0.19.20-alpha.2"
+ "@visactor/vrender": "0.19.20-alpha.3",
+ "@visactor/vrender-core": "0.19.20-alpha.3",
+ "@visactor/vrender-kits": "0.19.20-alpha.3",
+ "@visactor/vrender-components": "0.19.20-alpha.3"
// "example2": "npm:@company/example2@^1.0.0"
},
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 0d83d6f4..b5647dd8 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -1,10 +1,10 @@
lockfileVersion: 5.4
overrides:
- '@visactor/vrender': 0.19.20-alpha.2
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
- '@visactor/vrender-components': 0.19.20-alpha.2
+ '@visactor/vrender': 0.19.20-alpha.3
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
+ '@visactor/vrender-components': 0.19.20-alpha.3
importers:
@@ -76,10 +76,10 @@ importers:
'@types/react': ^18.0.0
'@types/react-dom': ^18.0.0
'@visactor/vchart': 1.11.5
- '@visactor/vrender': 0.19.20-alpha.2
- '@visactor/vrender-components': 0.19.20-alpha.2
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender': 0.19.20-alpha.3
+ '@visactor/vrender-components': 0.19.20-alpha.3
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
'@visactor/vutils': ~0.18.4
'@vitejs/plugin-react': 3.1.0
canvas: 2.11.2
@@ -96,10 +96,10 @@ importers:
vite: 3.2.6
dependencies:
'@visactor/vchart': 1.11.5
- '@visactor/vrender': 0.19.20-alpha.2
- '@visactor/vrender-components': 0.19.20-alpha.2
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender': 0.19.20-alpha.3
+ '@visactor/vrender-components': 0.19.20-alpha.3
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
'@visactor/vutils': 0.18.8
devDependencies:
'@douyinfe/semi-ui': 2.62.1_nnrd3gsncyragczmpvfhocinkq
@@ -1971,6 +1971,7 @@ packages:
- supports-color
- ts-node
- utf-8-validate
+ dev: true
/@jest/core/26.6.3_canvas@2.11.2:
resolution: {integrity: sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==}
@@ -2010,7 +2011,6 @@ packages:
- supports-color
- ts-node
- utf-8-validate
- dev: true
/@jest/environment/24.9.0:
resolution: {integrity: sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==}
@@ -2156,6 +2156,7 @@ packages:
- supports-color
- ts-node
- utf-8-validate
+ dev: true
/@jest/test-sequencer/26.6.3_canvas@2.11.2:
resolution: {integrity: sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==}
@@ -2172,7 +2173,6 @@ packages:
- supports-color
- ts-node
- utf-8-validate
- dev: true
/@jest/transform/24.9.0:
resolution: {integrity: sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==}
@@ -2293,7 +2293,6 @@ packages:
transitivePeerDependencies:
- encoding
- supports-color
- dev: true
/@mdx-js/mdx/3.0.1:
resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==}
@@ -3224,9 +3223,9 @@ packages:
'@visactor/vgrammar-venn': 0.13.10
'@visactor/vgrammar-wordcloud': 0.13.10
'@visactor/vgrammar-wordcloud-shape': 0.13.10
- '@visactor/vrender-components': 0.19.20-alpha.2
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender-components': 0.19.20-alpha.3
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
'@visactor/vscale': 0.18.9
'@visactor/vutils': 0.18.9
'@visactor/vutils-extension': 1.11.5
@@ -3267,9 +3266,9 @@ packages:
'@visactor/vdataset': 0.18.9
'@visactor/vgrammar-coordinate': 0.13.10
'@visactor/vgrammar-util': 0.13.10
- '@visactor/vrender-components': 0.19.20-alpha.2
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender-components': 0.19.20-alpha.3
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
'@visactor/vscale': 0.18.9
'@visactor/vutils': 0.18.9
dev: false
@@ -3279,8 +3278,8 @@ packages:
dependencies:
'@visactor/vgrammar-core': 0.13.10
'@visactor/vgrammar-util': 0.13.10
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
'@visactor/vutils': 0.18.9
dev: false
@@ -3298,8 +3297,8 @@ packages:
dependencies:
'@visactor/vgrammar-core': 0.13.10
'@visactor/vgrammar-util': 0.13.10
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
'@visactor/vutils': 0.18.9
dev: false
@@ -3314,8 +3313,8 @@ packages:
dependencies:
'@visactor/vgrammar-core': 0.13.10
'@visactor/vgrammar-util': 0.13.10
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
'@visactor/vutils': 0.18.9
dev: false
@@ -3324,8 +3323,8 @@ packages:
dependencies:
'@visactor/vgrammar-core': 0.13.10
'@visactor/vgrammar-util': 0.13.10
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
'@visactor/vscale': 0.18.9
'@visactor/vutils': 0.18.9
dev: false
@@ -3335,41 +3334,41 @@ packages:
dependencies:
'@visactor/vgrammar-core': 0.13.10
'@visactor/vgrammar-util': 0.13.10
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
'@visactor/vutils': 0.18.9
dev: false
- /@visactor/vrender-components/0.19.20-alpha.2:
- resolution: {integrity: sha512-Clk9lFbdMDF1vOAyf4S/MBjCzLKurYSZZZLAzzTqRIimjFoaiZ0EqsspID4lscmmlBn4ENv396cusw4Aeoi3Kw==}
+ /@visactor/vrender-components/0.19.20-alpha.3:
+ resolution: {integrity: sha512-Fl7o5EwRBZOSQYOwW/WkojlUrEjnThKWI3LSzQL6F5zDyhmdp77aFLrmd6ZRD/nNFlr/vDjwQHwWXZwJhIDzyg==}
dependencies:
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
'@visactor/vscale': 0.18.9
'@visactor/vutils': 0.18.12
dev: false
- /@visactor/vrender-core/0.19.20-alpha.2:
- resolution: {integrity: sha512-N0SN+lW5pFtBrUIl74n6VK//poLw4pdKga4EHsAJpPwDZUHLQdHG/69sMx9BMt60vKXgD5EnagH5uoh3DiJPkA==}
+ /@visactor/vrender-core/0.19.20-alpha.3:
+ resolution: {integrity: sha512-4tOkbKWeVZ8D+PHjc4ZUriQslz6uWMycTpdp0UfFSv9r7F7hAoVrEMk7bXM3YMG6pgxaPM8ZkX9p3KpQF04yKQ==}
dependencies:
'@visactor/vutils': 0.18.12
color-convert: 2.0.1
dev: false
- /@visactor/vrender-kits/0.19.20-alpha.2:
- resolution: {integrity: sha512-Jg7r1ebMHjDWRaSJTneZBtNHkk9vVZp2YWtPbsLEmgrNso0bdSnA9O5RVooQ47UPhNjcdr4PnN+DApHcezFULA==}
+ /@visactor/vrender-kits/0.19.20-alpha.3:
+ resolution: {integrity: sha512-YUvR0DSYALGB35cBiNA4trd7u0HEi2AXkCcXZkoCFSLcUeQDqPHPsLFRRyKjR6BvEyhB+Jg/hKdw95r9b2myjw==}
dependencies:
'@resvg/resvg-js': 2.4.1
- '@visactor/vrender-core': 0.19.20-alpha.2
+ '@visactor/vrender-core': 0.19.20-alpha.3
'@visactor/vutils': 0.18.12
roughjs: 4.5.2
dev: false
- /@visactor/vrender/0.19.20-alpha.2:
- resolution: {integrity: sha512-FdBRAbs5ibctEzvMJnY3VK+IopHaJ0iF/gdktCXCISKuaVESke3L8GVPkZ0+CD7LA5ZPryf61KgYDKaJGPPE1g==}
+ /@visactor/vrender/0.19.20-alpha.3:
+ resolution: {integrity: sha512-c3G8nroyRzozSQ4MxTBgR5k3um0pKskZ3CZN4vex/rIoFL2kQWFK6ABMiG1wJZb2ZaGa1jEtb0HMdQte/KT5TA==}
dependencies:
- '@visactor/vrender-core': 0.19.20-alpha.2
- '@visactor/vrender-kits': 0.19.20-alpha.2
+ '@visactor/vrender-core': 0.19.20-alpha.3
+ '@visactor/vrender-kits': 0.19.20-alpha.3
dev: false
/@visactor/vscale/0.18.9:
@@ -3470,7 +3469,6 @@ packages:
/abbrev/1.1.1:
resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
- dev: true
/abs-svg-path/0.1.1:
resolution: {integrity: sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==}
@@ -3644,7 +3642,6 @@ packages:
/aproba/2.0.0:
resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
- dev: true
/archy/1.0.0:
resolution: {integrity: sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==}
@@ -3657,7 +3654,6 @@ packages:
dependencies:
delegates: 1.0.0
readable-stream: 3.6.2
- dev: true
/arg/4.1.3:
resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
@@ -4323,7 +4319,6 @@ packages:
transitivePeerDependencies:
- encoding
- supports-color
- dev: true
/capture-exit/2.0.0:
resolution: {integrity: sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==}
@@ -4438,7 +4433,6 @@ packages:
/chownr/2.0.0:
resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
engines: {node: '>=10'}
- dev: true
/ci-info/2.0.0:
resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
@@ -4690,7 +4684,6 @@ packages:
/console-control-strings/1.1.0:
resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
- dev: true
/convert-source-map/1.9.0:
resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
@@ -4948,7 +4941,6 @@ packages:
engines: {node: '>=8'}
dependencies:
mimic-response: 2.1.0
- dev: true
/deep-eql/4.1.3:
resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
@@ -5026,7 +5018,6 @@ packages:
/delegates/1.0.0:
resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
- dev: true
/dequal/2.0.3:
resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
@@ -5041,7 +5032,6 @@ packages:
/detect-libc/2.0.3:
resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
engines: {node: '>=8'}
- dev: true
/detect-newline/2.1.0:
resolution: {integrity: sha512-CwffZFvlJffUg9zZA0uqrjQayUTC8ob94pnr5sFwaVv3IOmkfUHcWH+jXaQK3askE51Cqe8/9Ql/0uXNwqZ8Zg==}
@@ -6270,7 +6260,6 @@ packages:
engines: {node: '>= 8'}
dependencies:
minipass: 3.3.6
- dev: true
/fs-mkdirp-stream/1.0.0:
resolution: {integrity: sha512-+vSd9frUnapVC2RZYfL3FCB2p3g4TBhaUmrsWlSudsGdnxIuUvBB2QM1VZeBtc49QFwrp+wQLrDs3+xxDgI5gQ==}
@@ -6333,7 +6322,6 @@ packages:
string-width: 4.2.3
strip-ansi: 6.0.1
wide-align: 1.1.5
- dev: true
/gensync/1.0.0-beta.2:
resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
@@ -6767,7 +6755,6 @@ packages:
/has-unicode/2.0.1:
resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
- dev: true
/has-value/0.3.1:
resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==}
@@ -7497,6 +7484,7 @@ packages:
- supports-color
- ts-node
- utf-8-validate
+ dev: true
/jest-cli/26.6.3_canvas@2.11.2:
resolution: {integrity: sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==}
@@ -7522,7 +7510,6 @@ packages:
- supports-color
- ts-node
- utf-8-validate
- dev: true
/jest-config/24.9.0:
resolution: {integrity: sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==}
@@ -7581,6 +7568,7 @@ packages:
- canvas
- supports-color
- utf-8-validate
+ dev: true
/jest-config/26.6.3_canvas@2.11.2:
resolution: {integrity: sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==}
@@ -7614,7 +7602,6 @@ packages:
- canvas
- supports-color
- utf-8-validate
- dev: true
/jest-diff/24.9.0:
resolution: {integrity: sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==}
@@ -7729,6 +7716,7 @@ packages:
- canvas
- supports-color
- utf-8-validate
+ dev: true
/jest-environment-jsdom/26.6.2_canvas@2.11.2:
resolution: {integrity: sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==}
@@ -7746,7 +7734,6 @@ packages:
- canvas
- supports-color
- utf-8-validate
- dev: true
/jest-environment-node/24.9.0:
resolution: {integrity: sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==}
@@ -7887,6 +7874,7 @@ packages:
- supports-color
- ts-node
- utf-8-validate
+ dev: true
/jest-jasmine2/26.6.3_canvas@2.11.2:
resolution: {integrity: sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==}
@@ -7916,7 +7904,6 @@ packages:
- supports-color
- ts-node
- utf-8-validate
- dev: true
/jest-leak-detector/24.9.0:
resolution: {integrity: sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==}
@@ -8125,6 +8112,7 @@ packages:
- supports-color
- ts-node
- utf-8-validate
+ dev: true
/jest-runner/26.6.3_canvas@2.11.2:
resolution: {integrity: sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==}
@@ -8156,7 +8144,6 @@ packages:
- supports-color
- ts-node
- utf-8-validate
- dev: true
/jest-runtime/24.9.0:
resolution: {integrity: sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==}
@@ -8228,6 +8215,7 @@ packages:
- supports-color
- ts-node
- utf-8-validate
+ dev: true
/jest-runtime/26.6.3_canvas@2.11.2:
resolution: {integrity: sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==}
@@ -8267,7 +8255,6 @@ packages:
- supports-color
- ts-node
- utf-8-validate
- dev: true
/jest-serializer/24.9.0:
resolution: {integrity: sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==}
@@ -8415,6 +8402,7 @@ packages:
- supports-color
- ts-node
- utf-8-validate
+ dev: true
/jest/26.6.3_canvas@2.11.2:
resolution: {integrity: sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==}
@@ -8430,7 +8418,6 @@ packages:
- supports-color
- ts-node
- utf-8-validate
- dev: true
/js-string-escape/1.0.1:
resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==}
@@ -8528,6 +8515,7 @@ packages:
- bufferutil
- supports-color
- utf-8-validate
+ dev: true
/jsdom/16.7.0_canvas@2.11.2:
resolution: {integrity: sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==}
@@ -8570,7 +8558,6 @@ packages:
- bufferutil
- supports-color
- utf-8-validate
- dev: true
/jsesc/0.5.0:
resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
@@ -9613,7 +9600,6 @@ packages:
/mimic-response/2.1.0:
resolution: {integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==}
engines: {node: '>=8'}
- dev: true
/minimatch/3.1.2:
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
@@ -9643,12 +9629,10 @@ packages:
engines: {node: '>=8'}
dependencies:
yallist: 4.0.0
- dev: true
/minipass/5.0.0:
resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
engines: {node: '>=8'}
- dev: true
/minizlib/2.1.2:
resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
@@ -9656,7 +9640,6 @@ packages:
dependencies:
minipass: 3.3.6
yallist: 4.0.0
- dev: true
/mixin-deep/1.3.2:
resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
@@ -9766,7 +9749,6 @@ packages:
optional: true
dependencies:
whatwg-url: 5.0.0
- dev: true
/node-int64/0.4.0:
resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
@@ -9792,7 +9774,6 @@ packages:
hasBin: true
dependencies:
abbrev: 1.1.1
- dev: true
/normalize-package-data/2.5.0:
resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
@@ -9858,7 +9839,6 @@ packages:
console-control-strings: 1.1.0
gauge: 3.0.2
set-blocking: 2.0.0
- dev: true
/number-is-nan/1.0.1:
resolution: {integrity: sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==}
@@ -11399,7 +11379,6 @@ packages:
/simple-concat/1.0.1:
resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
- dev: true
/simple-get/3.1.1:
resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==}
@@ -11407,7 +11386,6 @@ packages:
decompress-response: 4.2.1
once: 1.4.0
simple-concat: 1.0.1
- dev: true
/simple-statistics/7.8.3:
resolution: {integrity: sha512-JFvMY00t6SBGtwMuJ+nqgsx9ylkMiJ5JlK9bkj8AdvniIe5615wWQYkKHXe84XtSuc40G/tlrPu0A5/NlJvv8A==}
@@ -11863,7 +11841,6 @@ packages:
minizlib: 2.1.2
mkdirp: 1.0.4
yallist: 4.0.0
- dev: true
/terminal-link/2.1.1:
resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==}
@@ -12075,7 +12052,6 @@ packages:
/tr46/0.0.3:
resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
- dev: true
/tr46/1.0.1:
resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
@@ -12108,7 +12084,7 @@ packages:
bs-logger: 0.2.6
buffer-from: 1.1.2
fast-json-stable-stringify: 2.1.0
- jest: 26.6.3
+ jest: 26.6.3_canvas@2.11.2
jest-util: 26.6.2
json5: 2.2.3
lodash: 4.17.21
@@ -12826,7 +12802,6 @@ packages:
/webidl-conversions/3.0.1:
resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
- dev: true
/webidl-conversions/4.0.2:
resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
@@ -12858,7 +12833,6 @@ packages:
dependencies:
tr46: 0.0.3
webidl-conversions: 3.0.1
- dev: true
/whatwg-url/6.5.0:
resolution: {integrity: sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==}
@@ -12936,7 +12910,6 @@ packages:
resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
dependencies:
string-width: 4.2.3
- dev: true
/word-wrap/1.2.5:
resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
diff --git a/docs/assets/examples/en/site-scene/basic.md b/docs/assets/examples/en/site-scene/basic.md
index f541cbb5..398c4a5a 100644
--- a/docs/assets/examples/en/site-scene/basic.md
+++ b/docs/assets/examples/en/site-scene/basic.md
@@ -1230,7 +1230,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'title1',
zIndex: 1,
position: {
@@ -1248,7 +1248,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'title2',
zIndex: 1,
position: {
@@ -1266,7 +1266,7 @@ const spec = {
}
},
{
- type: 'RichTextComponent',
+ type: 'RichText',
id: 'titlesubtitle',
zIndex: 1,
position: {
@@ -1293,7 +1293,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene2-title2',
zIndex: 1,
position: {
@@ -1312,7 +1312,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene3-title1',
zIndex: 1,
position: {
@@ -1331,7 +1331,7 @@ const spec = {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'scene3-line-top',
zIndex: 1,
position: {
@@ -1357,7 +1357,7 @@ const spec = {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'scene3-line-bottom',
zIndex: 1,
position: {
@@ -1383,7 +1383,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene3-title-Nicole',
zIndex: 1,
position: {
@@ -1402,7 +1402,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-text-image-top',
zIndex: 1,
position: {
@@ -1418,7 +1418,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-text-image-top',
zIndex: 1,
position: {
@@ -1434,7 +1434,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-chart-image-1',
zIndex: 1,
position: {
@@ -1450,7 +1450,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-chart-image-2',
zIndex: 1,
position: {
@@ -1466,7 +1466,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-chart-image-3',
zIndex: 1,
position: {
@@ -1482,7 +1482,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-chart-image-4',
zIndex: 1,
position: {
@@ -1498,7 +1498,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-chart-image-5',
zIndex: 1,
position: {
@@ -1514,7 +1514,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-text-image-bottom',
zIndex: 1,
position: {
@@ -1530,7 +1530,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene3-title-1486',
zIndex: 1,
position: {
@@ -1549,7 +1549,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-title-image',
zIndex: 1,
position: {
@@ -1565,7 +1565,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene3-background',
zIndex: 0,
position: {
@@ -1582,7 +1582,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-background-decoration',
zIndex: 0,
position: {
@@ -1768,7 +1768,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-title-decoration',
zIndex: 1,
position: {
@@ -1784,7 +1784,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene4-title',
zIndex: 1,
position: {
@@ -1803,7 +1803,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene4-subtitle',
zIndex: 1,
position: {
@@ -1822,7 +1822,7 @@ const spec = {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'scene4-line-left',
zIndex: 1,
position: {
@@ -1848,7 +1848,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-line-left-decoration',
zIndex: 1,
position: {
@@ -1864,7 +1864,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-chart-image',
zIndex: 1,
position: {
@@ -2016,7 +2016,7 @@ const spec = {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'scene4-text-zh-line',
zIndex: 1,
position: {
@@ -2042,7 +2042,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-text-zh-image',
zIndex: 1,
position: {
@@ -2058,7 +2058,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-text-en-image',
zIndex: 1,
position: {
@@ -2074,7 +2074,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene4-green-rect',
zIndex: 1,
position: {
@@ -2092,7 +2092,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-decoration',
zIndex: 1,
position: {
@@ -2108,7 +2108,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene4-grey-rect',
zIndex: 1,
position: {
@@ -2125,7 +2125,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-bg-decoration',
zIndex: 1,
position: {
@@ -2141,7 +2141,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-bg-decoration',
zIndex: 1,
position: {
@@ -2157,7 +2157,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene5-background-top',
zIndex: 0,
position: {
@@ -2174,7 +2174,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene5-background-bottom',
zIndex: 0,
position: {
@@ -2191,7 +2191,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-title-image',
zIndex: 1,
position: {
@@ -2207,7 +2207,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-background-decoration',
zIndex: 0,
position: {
@@ -2224,7 +2224,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-atom',
zIndex: 0,
position: {
@@ -2240,7 +2240,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-zh-text',
zIndex: 0,
position: {
@@ -2256,7 +2256,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-en-text',
zIndex: 0,
position: {
@@ -2272,7 +2272,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-chart-image',
zIndex: 0,
position: {
@@ -3331,7 +3331,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene6-bg1',
zIndex: 1,
position: {
@@ -3348,7 +3348,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene6-bg2',
zIndex: -1,
position: {
@@ -3365,7 +3365,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene6-bg-bottom',
zIndex: 1,
position: {
@@ -3382,7 +3382,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene6-bg-top',
zIndex: 0,
position: {
@@ -3399,7 +3399,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img1',
zIndex: 1,
position: {
@@ -3415,7 +3415,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img2',
zIndex: 1,
position: {
@@ -3431,7 +3431,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img3',
zIndex: 1,
position: {
@@ -3447,7 +3447,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img4',
zIndex: 1,
position: {
@@ -3768,7 +3768,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene7-background-top',
zIndex: 0,
position: {
@@ -3786,7 +3786,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene7-background-middle',
zIndex: 0,
position: {
@@ -3803,7 +3803,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene7-background-bottom',
zIndex: 0,
position: {
@@ -3821,7 +3821,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene7-zh-text',
zIndex: 0,
position: {
@@ -3837,7 +3837,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene7-title',
zIndex: 0,
position: {
@@ -3853,7 +3853,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene7-chart-image',
zIndex: 0,
position: {
@@ -3869,7 +3869,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene7-en-text',
zIndex: 0,
position: {
@@ -3885,7 +3885,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene7-pie-image',
zIndex: 0,
position: {
@@ -3978,7 +3978,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene8-background',
zIndex: 0,
position: {
@@ -3995,7 +3995,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-bg-decoration',
zIndex: 0,
position: {
@@ -4011,7 +4011,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-title',
zIndex: 0,
position: {
@@ -4027,7 +4027,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-text',
zIndex: 0,
position: {
@@ -4043,7 +4043,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-chart-image',
zIndex: 0,
position: {
@@ -4059,7 +4059,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-image1',
zIndex: 0,
position: {
@@ -4075,7 +4075,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-image2',
zIndex: 0,
position: {
@@ -4362,7 +4362,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene9-background',
zIndex: 0,
position: {
@@ -4379,7 +4379,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-bg-decoration',
zIndex: 0,
position: {
@@ -4395,7 +4395,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-person',
zIndex: 1,
position: {
@@ -4411,7 +4411,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-chart-image',
zIndex: 0,
position: {
@@ -4428,7 +4428,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-title',
zIndex: 0,
position: {
@@ -4444,7 +4444,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-text-zh',
zIndex: 0,
position: {
@@ -4460,7 +4460,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-text-en',
zIndex: 0,
position: {
@@ -4576,7 +4576,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene10-background',
zIndex: 0,
position: {
@@ -4593,7 +4593,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-person',
zIndex: 1,
position: {
@@ -4609,7 +4609,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-title',
zIndex: 1,
position: {
@@ -4625,7 +4625,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-bg-decoration',
zIndex: 0,
position: {
@@ -4641,7 +4641,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-text-zh',
zIndex: 0,
position: {
@@ -4657,7 +4657,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-text-en',
zIndex: 0,
position: {
@@ -4673,7 +4673,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-chart-image',
zIndex: 0,
position: {
@@ -4886,7 +4886,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene11-background',
zIndex: 0,
position: {
@@ -4903,7 +4903,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene11-bg-decoration',
zIndex: 0,
position: {
@@ -4919,7 +4919,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene11-title',
zIndex: 0,
position: {
@@ -4935,7 +4935,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene11-text-en',
zIndex: 0,
position: {
@@ -4951,7 +4951,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene11-text-zh',
zIndex: 0,
position: {
@@ -4967,7 +4967,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene11-chart-image',
zIndex: 0,
position: {
@@ -5178,7 +5178,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene12-background',
zIndex: 0,
position: {
@@ -5211,7 +5211,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene12-background-bottom',
zIndex: 0,
position: {
@@ -5228,7 +5228,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12-title',
zIndex: 0,
position: {
@@ -5244,7 +5244,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12-chart-image',
zIndex: 1,
position: {
@@ -5260,7 +5260,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12-bg-decoration',
zIndex: 0,
position: {
@@ -5276,7 +5276,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12-text-zh',
zIndex: 0,
position: {
@@ -5292,7 +5292,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12-text-en',
zIndex: 0,
position: {
@@ -6381,7 +6381,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12_2-title',
zIndex: 0,
position: {
@@ -6397,7 +6397,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12_2-chart-image',
zIndex: 1,
position: {
@@ -6413,7 +6413,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12_2-text-zh',
zIndex: 0,
position: {
@@ -6429,7 +6429,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12_2-text-en',
zIndex: 0,
position: {
@@ -7045,7 +7045,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene13-background',
zIndex: 2,
position: {
@@ -7062,7 +7062,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene13-logo',
zIndex: 2,
position: {
diff --git a/docs/assets/examples/zh/site-scene/basic.md b/docs/assets/examples/zh/site-scene/basic.md
index f541cbb5..398c4a5a 100644
--- a/docs/assets/examples/zh/site-scene/basic.md
+++ b/docs/assets/examples/zh/site-scene/basic.md
@@ -1230,7 +1230,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'title1',
zIndex: 1,
position: {
@@ -1248,7 +1248,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'title2',
zIndex: 1,
position: {
@@ -1266,7 +1266,7 @@ const spec = {
}
},
{
- type: 'RichTextComponent',
+ type: 'RichText',
id: 'titlesubtitle',
zIndex: 1,
position: {
@@ -1293,7 +1293,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene2-title2',
zIndex: 1,
position: {
@@ -1312,7 +1312,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene3-title1',
zIndex: 1,
position: {
@@ -1331,7 +1331,7 @@ const spec = {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'scene3-line-top',
zIndex: 1,
position: {
@@ -1357,7 +1357,7 @@ const spec = {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'scene3-line-bottom',
zIndex: 1,
position: {
@@ -1383,7 +1383,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene3-title-Nicole',
zIndex: 1,
position: {
@@ -1402,7 +1402,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-text-image-top',
zIndex: 1,
position: {
@@ -1418,7 +1418,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-text-image-top',
zIndex: 1,
position: {
@@ -1434,7 +1434,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-chart-image-1',
zIndex: 1,
position: {
@@ -1450,7 +1450,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-chart-image-2',
zIndex: 1,
position: {
@@ -1466,7 +1466,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-chart-image-3',
zIndex: 1,
position: {
@@ -1482,7 +1482,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-chart-image-4',
zIndex: 1,
position: {
@@ -1498,7 +1498,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-chart-image-5',
zIndex: 1,
position: {
@@ -1514,7 +1514,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-text-image-bottom',
zIndex: 1,
position: {
@@ -1530,7 +1530,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene3-title-1486',
zIndex: 1,
position: {
@@ -1549,7 +1549,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-title-image',
zIndex: 1,
position: {
@@ -1565,7 +1565,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene3-background',
zIndex: 0,
position: {
@@ -1582,7 +1582,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene3-background-decoration',
zIndex: 0,
position: {
@@ -1768,7 +1768,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-title-decoration',
zIndex: 1,
position: {
@@ -1784,7 +1784,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene4-title',
zIndex: 1,
position: {
@@ -1803,7 +1803,7 @@ const spec = {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene4-subtitle',
zIndex: 1,
position: {
@@ -1822,7 +1822,7 @@ const spec = {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'scene4-line-left',
zIndex: 1,
position: {
@@ -1848,7 +1848,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-line-left-decoration',
zIndex: 1,
position: {
@@ -1864,7 +1864,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-chart-image',
zIndex: 1,
position: {
@@ -2016,7 +2016,7 @@ const spec = {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'scene4-text-zh-line',
zIndex: 1,
position: {
@@ -2042,7 +2042,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-text-zh-image',
zIndex: 1,
position: {
@@ -2058,7 +2058,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-text-en-image',
zIndex: 1,
position: {
@@ -2074,7 +2074,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene4-green-rect',
zIndex: 1,
position: {
@@ -2092,7 +2092,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-decoration',
zIndex: 1,
position: {
@@ -2108,7 +2108,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene4-grey-rect',
zIndex: 1,
position: {
@@ -2125,7 +2125,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-bg-decoration',
zIndex: 1,
position: {
@@ -2141,7 +2141,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-bg-decoration',
zIndex: 1,
position: {
@@ -2157,7 +2157,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene5-background-top',
zIndex: 0,
position: {
@@ -2174,7 +2174,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene5-background-bottom',
zIndex: 0,
position: {
@@ -2191,7 +2191,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-title-image',
zIndex: 1,
position: {
@@ -2207,7 +2207,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-background-decoration',
zIndex: 0,
position: {
@@ -2224,7 +2224,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-atom',
zIndex: 0,
position: {
@@ -2240,7 +2240,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-zh-text',
zIndex: 0,
position: {
@@ -2256,7 +2256,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-en-text',
zIndex: 0,
position: {
@@ -2272,7 +2272,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene5-chart-image',
zIndex: 0,
position: {
@@ -3331,7 +3331,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene6-bg1',
zIndex: 1,
position: {
@@ -3348,7 +3348,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene6-bg2',
zIndex: -1,
position: {
@@ -3365,7 +3365,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene6-bg-bottom',
zIndex: 1,
position: {
@@ -3382,7 +3382,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene6-bg-top',
zIndex: 0,
position: {
@@ -3399,7 +3399,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img1',
zIndex: 1,
position: {
@@ -3415,7 +3415,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img2',
zIndex: 1,
position: {
@@ -3431,7 +3431,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img3',
zIndex: 1,
position: {
@@ -3447,7 +3447,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img4',
zIndex: 1,
position: {
@@ -3768,7 +3768,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene7-background-top',
zIndex: 0,
position: {
@@ -3786,7 +3786,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene7-background-middle',
zIndex: 0,
position: {
@@ -3803,7 +3803,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene7-background-bottom',
zIndex: 0,
position: {
@@ -3821,7 +3821,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene7-zh-text',
zIndex: 0,
position: {
@@ -3837,7 +3837,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene7-title',
zIndex: 0,
position: {
@@ -3853,7 +3853,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene7-chart-image',
zIndex: 0,
position: {
@@ -3869,7 +3869,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene7-en-text',
zIndex: 0,
position: {
@@ -3885,7 +3885,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene7-pie-image',
zIndex: 0,
position: {
@@ -3978,7 +3978,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene8-background',
zIndex: 0,
position: {
@@ -3995,7 +3995,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-bg-decoration',
zIndex: 0,
position: {
@@ -4011,7 +4011,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-title',
zIndex: 0,
position: {
@@ -4027,7 +4027,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-text',
zIndex: 0,
position: {
@@ -4043,7 +4043,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-chart-image',
zIndex: 0,
position: {
@@ -4059,7 +4059,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-image1',
zIndex: 0,
position: {
@@ -4075,7 +4075,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene8-image2',
zIndex: 0,
position: {
@@ -4362,7 +4362,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene9-background',
zIndex: 0,
position: {
@@ -4379,7 +4379,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-bg-decoration',
zIndex: 0,
position: {
@@ -4395,7 +4395,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-person',
zIndex: 1,
position: {
@@ -4411,7 +4411,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-chart-image',
zIndex: 0,
position: {
@@ -4428,7 +4428,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-title',
zIndex: 0,
position: {
@@ -4444,7 +4444,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-text-zh',
zIndex: 0,
position: {
@@ -4460,7 +4460,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene9-text-en',
zIndex: 0,
position: {
@@ -4576,7 +4576,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene10-background',
zIndex: 0,
position: {
@@ -4593,7 +4593,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-person',
zIndex: 1,
position: {
@@ -4609,7 +4609,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-title',
zIndex: 1,
position: {
@@ -4625,7 +4625,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-bg-decoration',
zIndex: 0,
position: {
@@ -4641,7 +4641,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-text-zh',
zIndex: 0,
position: {
@@ -4657,7 +4657,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-text-en',
zIndex: 0,
position: {
@@ -4673,7 +4673,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene10-chart-image',
zIndex: 0,
position: {
@@ -4886,7 +4886,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene11-background',
zIndex: 0,
position: {
@@ -4903,7 +4903,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene11-bg-decoration',
zIndex: 0,
position: {
@@ -4919,7 +4919,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene11-title',
zIndex: 0,
position: {
@@ -4935,7 +4935,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene11-text-en',
zIndex: 0,
position: {
@@ -4951,7 +4951,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene11-text-zh',
zIndex: 0,
position: {
@@ -4967,7 +4967,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene11-chart-image',
zIndex: 0,
position: {
@@ -5178,7 +5178,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene12-background',
zIndex: 0,
position: {
@@ -5211,7 +5211,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene12-background-bottom',
zIndex: 0,
position: {
@@ -5228,7 +5228,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12-title',
zIndex: 0,
position: {
@@ -5244,7 +5244,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12-chart-image',
zIndex: 1,
position: {
@@ -5260,7 +5260,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12-bg-decoration',
zIndex: 0,
position: {
@@ -5276,7 +5276,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12-text-zh',
zIndex: 0,
position: {
@@ -5292,7 +5292,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12-text-en',
zIndex: 0,
position: {
@@ -6381,7 +6381,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12_2-title',
zIndex: 0,
position: {
@@ -6397,7 +6397,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12_2-chart-image',
zIndex: 1,
position: {
@@ -6413,7 +6413,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12_2-text-zh',
zIndex: 0,
position: {
@@ -6429,7 +6429,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene12_2-text-en',
zIndex: 0,
position: {
@@ -7045,7 +7045,7 @@ const spec = {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene13-background',
zIndex: 2,
position: {
@@ -7062,7 +7062,7 @@ const spec = {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene13-logo',
zIndex: 2,
position: {
diff --git a/json1.json b/json1.json
index d6ae6678..54ce0c2b 100644
--- a/json1.json
+++ b/json1.json
@@ -1294,7 +1294,7 @@
}
},
{
- "type": "TextComponent",
+ "type": "Text",
"id": "title1",
"zIndex": 1,
"position": {
@@ -1312,7 +1312,7 @@
}
},
{
- "type": "TextComponent",
+ "type": "Text",
"id": "title2",
"zIndex": 1,
"position": {
@@ -1330,7 +1330,7 @@
}
},
{
- "type": "RichTextComponent",
+ "type": "RichText",
"id": "titlesubtitle",
"zIndex": 1,
"position": {
@@ -1357,7 +1357,7 @@
}
},
{
- "type": "TextComponent",
+ "type": "Text",
"id": "scene2-title2",
"zIndex": 1,
"position": {
diff --git a/json2.json b/json2.json
index db53f6cf..dec7dec6 100644
--- a/json2.json
+++ b/json2.json
@@ -1,1980 +1,1971 @@
{
"characters": [
- {
- "type": "RangeColumnChart",
- "id": "chart0",
- "zIndex": 1,
- "position": {
- "top": 50,
- "left": 120,
- "width": 110,
- "height": 110
+ {
+ "type": "RangeColumnChart",
+ "id": "chart0",
+ "zIndex": 1,
+ "position": {
+ "top": 50,
+ "left": 120,
+ "width": 110,
+ "height": 110
+ },
+ "options": {
+ "attribute": {},
+ "title": {
+ "text": "Timeline Chart",
+ "orient": "bottom",
+ "align": "center",
+ "textStyle": {
+ "fontSize": 10,
+ "lineHeight": 10
+ }
+ },
+ "padding": 12,
+ "data": [
+ {
+ "id": "id0",
+ "values": [
+ {
+ "type": "a",
+ "value": 0.36,
+ "value2": 0.06
+ },
+ {
+ "type": "b",
+ "value": 0.66,
+ "value2": 0.26
+ },
+ {
+ "type": "c",
+ "value": 0.4,
+ "value2": 0
+ },
+ {
+ "type": "d",
+ "value": 0.6,
+ "value2": 0.2
+ }
+ ]
+ }
+ ],
+ "direction": "horizontal",
+ "seriesSpec": [
+ {
+ "matchInfo": {
+ "specIndex": "all"
+ },
+ "spec": {
+ "minField": "value",
+ "maxField": "value2",
+ "yField": "type",
+ "bar": {
+ "maxWidth": 2,
+ "style": {
+ "maxWidth": 2
+ }
+ },
+ "label": {
+ "style": {
+ "visible": false
+ }
+ }
+ }
+ }
+ ],
+ "componentSpec": [
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "bottom"
+ },
+ "spec": {
+ "domainLine": {
+ "visible": true
+ },
+ "tick": {
+ "visible": false
+ },
+ "label": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
+ }
+ }
},
- "options": {
- "attribute": {},
- "title": {
- "text": "Timeline Chart",
- "orient": "bottom",
- "align": "center",
- "textStyle": {
- "fontSize": 10,
- "lineHeight": 10
- }
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "left"
+ },
+ "spec": {
+ "domainLine": {
+ "visible": false
},
- "padding": 12,
- "data": [
- {
- "id": "id0",
- "values": [
- {
- "type": "a",
- "value": 0.36,
- "value2": 0.06
- },
- {
- "type": "b",
- "value": 0.66,
- "value2": 0.26
- },
- {
- "type": "c",
- "value": 0.4,
- "value2": 0
- },
- {
- "type": "d",
- "value": 0.6,
- "value2": 0.2
- }
- ]
- }
- ],
- "direction": "horizontal",
- "seriesSpec": [
- {
- "matchInfo": {
- "specIndex": "all"
- },
- "spec": {
- "minField": "value",
- "maxField": "value2",
- "yField": "type",
- "bar": {
- "maxWidth": 2,
- "style": {
- "maxWidth": 2
- }
- },
- "label": {
- "style": {
- "visible": false
- }
- }
- }
- }
- ],
- "componentSpec": [
- {
- "specKey": "axes",
- "matchInfo": {
- "orient": "bottom"
- },
- "spec": {
- "domainLine": {
- "visible": true
- },
- "tick": {
- "visible": false
- },
- "label": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
- },
- {
- "specKey": "axes",
- "matchInfo": {
- "orient": "left"
- },
- "spec": {
- "domainLine": {
- "visible": false
- },
- "tick": {
- "visible": false
- },
- "label": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
- }
- ],
- "panel": {
- "fill": "white",
- "shadowColor": "rgba(0, 0, 0, 0.05)",
- "shadowBlur": 10,
- "shadowOffsetX": 4,
- "shadowOffsetY": 4
+ "tick": {
+ "visible": false
+ },
+ "label": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
}
+ }
}
+ ],
+ "panel": {
+ "fill": "white",
+ "shadowColor": "rgba(0, 0, 0, 0.05)",
+ "shadowBlur": 10,
+ "shadowOffsetX": 4,
+ "shadowOffsetY": 4
+ }
+ }
+ },
+ {
+ "type": "BarChart",
+ "id": "chart1",
+ "zIndex": 1,
+ "position": {
+ "top": 50,
+ "left": 290,
+ "width": 110,
+ "height": 110
},
- {
- "type": "BarChart",
- "id": "chart1",
- "zIndex": 1,
- "position": {
- "top": 50,
- "left": 290,
- "width": 110,
- "height": 110
- },
- "options": {
- "attribute": {},
- "title": {
- "text": "BarChart",
- "orient": "bottom",
- "align": "center",
- "textStyle": {
- "fontSize": 10,
- "lineHeight": 10
- }
+ "options": {
+ "attribute": {},
+ "title": {
+ "text": "BarChart",
+ "orient": "bottom",
+ "align": "center",
+ "textStyle": {
+ "fontSize": 10,
+ "lineHeight": 10
+ }
+ },
+ "padding": 12,
+ "data": [
+ {
+ "id": "data",
+ "values": [
+ {
+ "x": "Mon",
+ "y": 100,
+ "type": "销售额"
},
- "padding": 12,
- "data": [
- {
- "id": "data",
- "values": [
- {
- "x": "Mon",
- "y": 100,
- "type": "销售额"
- },
- {
- "x": "Tues",
- "y": 66,
- "type": "销售额"
- },
- {
- "x": "Wed",
- "y": 95,
- "type": "销售额"
- },
- {
- "x": "Mon",
- "y": 43,
- "type": "利润"
- },
- {
- "x": "Tues",
- "y": 80,
- "type": "利润"
- },
- {
- "x": "Wed",
- "y": 68,
- "type": "利润"
- }
- ]
- }
- ],
- "seriesSpec": [
- {
- "matchInfo": {
- "specIndex": "all"
+ {
+ "x": "Tues",
+ "y": 66,
+ "type": "销售额"
+ },
+ {
+ "x": "Wed",
+ "y": 95,
+ "type": "销售额"
+ },
+ {
+ "x": "Mon",
+ "y": 43,
+ "type": "利润"
+ },
+ {
+ "x": "Tues",
+ "y": 80,
+ "type": "利润"
+ },
+ {
+ "x": "Wed",
+ "y": 68,
+ "type": "利润"
+ }
+ ]
+ }
+ ],
+ "seriesSpec": [
+ {
+ "matchInfo": {
+ "specIndex": "all"
+ },
+ "spec": {
+ "xField": ["x", "type"],
+ "yField": "y",
+ "seriesField": "type",
+ "bar": {
+ "style": {
+ "fill": {
+ "gradient": "linear",
+ "stops": [
+ {
+ "offset": 1
},
- "spec": {
- "xField": [
- "x",
- "type"
- ],
- "yField": "y",
- "seriesField": "type",
- "bar": {
- "style": {
- "fill": {
- "gradient": "linear",
- "stops": [
- {
- "offset": 1
- },
- {
- "offset": 0,
- "opacity": 0.6
- }
- ]
- }
- },
- "state": {
- "selected": {
- "stroke": "#000",
- "strokeWidth": 1
- }
- }
- },
- "label": {
- "style": {
- "visible": false
- }
- }
+ {
+ "offset": 0,
+ "opacity": 0.6
}
+ ]
}
- ],
- "componentSpec": [
- {
- "specKey": "axes",
- "matchInfo": {
- "orient": "bottom"
- },
- "spec": {
- "tick": {
- "visible": false
- },
- "label": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
- },
- {
- "specKey": "axes",
- "matchInfo": {
- "orient": "left"
- },
- "spec": {
- "tick": {
- "visible": false
- },
- "label": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
+ },
+ "state": {
+ "selected": {
+ "stroke": "#000",
+ "strokeWidth": 1
}
- ],
- "color": [
- "#4CC9E4",
- "#4954E6"
- ],
- "panel": {
- "fill": "white",
- "shadowColor": "rgba(0, 0, 0, 0.05)",
- "shadowBlur": 10,
- "shadowOffsetX": 4,
- "shadowOffsetY": 4
+ }
+ },
+ "label": {
+ "style": {
+ "visible": false
+ }
}
+ }
}
+ ],
+ "componentSpec": [
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "bottom"
+ },
+ "spec": {
+ "tick": {
+ "visible": false
+ },
+ "label": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
+ }
+ }
+ },
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "left"
+ },
+ "spec": {
+ "tick": {
+ "visible": false
+ },
+ "label": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
+ }
+ }
+ }
+ ],
+ "color": ["#4CC9E4", "#4954E6"],
+ "panel": {
+ "fill": "white",
+ "shadowColor": "rgba(0, 0, 0, 0.05)",
+ "shadowBlur": 10,
+ "shadowOffsetX": 4,
+ "shadowOffsetY": 4
+ }
+ }
+ },
+ {
+ "type": "AreaChart",
+ "id": "chart2",
+ "zIndex": 1,
+ "position": {
+ "top": 50,
+ "left": 460,
+ "width": 110,
+ "height": 110
},
- {
- "type": "AreaChart",
- "id": "chart2",
- "zIndex": 1,
- "position": {
- "top": 50,
- "left": 460,
- "width": 110,
- "height": 110
+ "options": {
+ "attribute": {},
+ "title": {
+ "text": "Line/Area Chart",
+ "orient": "bottom",
+ "align": "center",
+ "textStyle": {
+ "fontSize": 10,
+ "lineHeight": 10
+ }
+ },
+ "padding": 12,
+ "data": [
+ {
+ "id": "data2",
+ "values": [
+ {
+ "x": 1,
+ "y": 70,
+ "type": "a"
+ },
+ {
+ "x": 2,
+ "y": 20,
+ "type": "a"
+ },
+ {
+ "x": 3,
+ "y": 30,
+ "type": "a"
+ },
+ {
+ "x": 4,
+ "y": 10,
+ "type": "a"
+ },
+ {
+ "x": 1,
+ "y": 70,
+ "type": "b"
+ },
+ {
+ "x": 2,
+ "y": 20,
+ "type": "b"
+ },
+ {
+ "x": 3,
+ "y": 30,
+ "type": "b"
+ },
+ {
+ "x": 4,
+ "y": 10,
+ "type": "b"
+ }
+ ]
+ }
+ ],
+ "seriesSpec": [
+ {
+ "matchInfo": {
+ "specIndex": "all"
+ },
+ "spec": {
+ "xField": "x",
+ "yField": "y",
+ "seriesField": "type",
+ "point": {
+ "visible": false
+ }
+ }
+ }
+ ],
+ "componentSpec": [
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "bottom"
+ },
+ "spec": {
+ "tick": {
+ "visible": false
+ },
+ "label": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
+ }
+ }
},
- "options": {
- "attribute": {},
- "title": {
- "text": "Line/Area Chart",
- "orient": "bottom",
- "align": "center",
- "textStyle": {
- "fontSize": 10,
- "lineHeight": 10
- }
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "left"
+ },
+ "spec": {
+ "tick": {
+ "visible": false
},
- "padding": 12,
- "data": [
- {
- "id": "data2",
- "values": [
- {
- "x": 1,
- "y": 70,
- "type": "a"
- },
- {
- "x": 2,
- "y": 20,
- "type": "a"
- },
- {
- "x": 3,
- "y": 30,
- "type": "a"
- },
- {
- "x": 4,
- "y": 10,
- "type": "a"
- },
- {
- "x": 1,
- "y": 70,
- "type": "b"
- },
- {
- "x": 2,
- "y": 20,
- "type": "b"
- },
- {
- "x": 3,
- "y": 30,
- "type": "b"
- },
- {
- "x": 4,
- "y": 10,
- "type": "b"
- }
- ]
- }
- ],
- "seriesSpec": [
- {
- "matchInfo": {
- "specIndex": "all"
- },
- "spec": {
- "xField": "x",
- "yField": "y",
- "seriesField": "type",
- "point": {
- "visible": false
- }
- }
- }
- ],
- "componentSpec": [
- {
- "specKey": "axes",
- "matchInfo": {
- "orient": "bottom"
- },
- "spec": {
- "tick": {
- "visible": false
- },
- "label": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
- },
- {
- "specKey": "axes",
- "matchInfo": {
- "orient": "left"
- },
- "spec": {
- "tick": {
- "visible": false
- },
- "label": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
- }
- ],
- "panel": {
- "fill": "white",
- "shadowColor": "rgba(0, 0, 0, 0.05)",
- "shadowBlur": 10,
- "shadowOffsetX": 4,
- "shadowOffsetY": 4
+ "label": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
}
+ }
}
+ ],
+ "panel": {
+ "fill": "white",
+ "shadowColor": "rgba(0, 0, 0, 0.05)",
+ "shadowBlur": 10,
+ "shadowOffsetX": 4,
+ "shadowOffsetY": 4
+ }
+ }
+ },
+ {
+ "type": "PieChart",
+ "id": "chart3",
+ "zIndex": 1,
+ "position": {
+ "top": 50,
+ "left": 630,
+ "width": 110,
+ "height": 110
},
- {
- "type": "PieChart",
- "id": "chart3",
- "zIndex": 1,
- "position": {
- "top": 50,
- "left": 630,
- "width": 110,
- "height": 110
+ "options": {
+ "attribute": {},
+ "title": {
+ "text": "Pie Chart",
+ "orient": "bottom",
+ "align": "center",
+ "textStyle": {
+ "fontSize": 10,
+ "lineHeight": 10
+ }
+ },
+ "padding": 12,
+ "data": [
+ {
+ "id": "data1",
+ "values": [
+ {
+ "value": 348,
+ "name": "中介渠道: 34.8%"
+ },
+ {
+ "value": 152,
+ "name": "会员: 15.2%"
+ },
+ {
+ "value": 500,
+ "name": "散客: 50%"
+ }
+ ]
+ }
+ ],
+ "seriesSpec": [
+ {
+ "matchInfo": {
+ "specIndex": "all"
+ },
+ "spec": {
+ "valueField": "value",
+ "categoryField": "name",
+ "radius": 1,
+ "innerRadius": 0
+ }
+ }
+ ],
+ "panel": {
+ "fill": "white",
+ "shadowColor": "rgba(0, 0, 0, 0.05)",
+ "shadowBlur": 10,
+ "shadowOffsetX": 4,
+ "shadowOffsetY": 4
+ }
+ }
+ },
+ {
+ "type": "ScatterChart",
+ "id": "chart4",
+ "zIndex": 1,
+ "position": {
+ "top": 50,
+ "left": 800,
+ "width": 110,
+ "height": 110
+ },
+ "options": {
+ "attribute": {},
+ "title": {
+ "text": "Scatter Chart",
+ "orient": "bottom",
+ "align": "center",
+ "textStyle": {
+ "fontSize": 10,
+ "lineHeight": 10
+ }
+ },
+ "padding": 12,
+ "data": [
+ {
+ "id": "data2",
+ "values": [
+ {
+ "x": 1,
+ "y": 70,
+ "type": "a"
+ },
+ {
+ "x": 2,
+ "y": 20,
+ "type": "a"
+ },
+ {
+ "x": 3,
+ "y": 30,
+ "type": "a"
+ },
+ {
+ "x": 4,
+ "y": 10,
+ "type": "a"
+ },
+ {
+ "x": 1,
+ "y": 70,
+ "type": "b"
+ },
+ {
+ "x": 2,
+ "y": 20,
+ "type": "b"
+ },
+ {
+ "x": 3,
+ "y": 30,
+ "type": "b"
+ },
+ {
+ "x": 4,
+ "y": 10,
+ "type": "b"
+ }
+ ]
+ }
+ ],
+ "componentSpec": [
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "bottom"
+ },
+ "spec": {
+ "tick": {
+ "visible": false
+ },
+ "label": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
+ }
+ }
},
- "options": {
- "attribute": {},
- "title": {
- "text": "Pie Chart",
- "orient": "bottom",
- "align": "center",
- "textStyle": {
- "fontSize": 10,
- "lineHeight": 10
- }
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "left"
+ },
+ "spec": {
+ "tick": {
+ "visible": false
},
- "padding": 12,
- "data": [
- {
- "id": "data1",
- "values": [
- {
- "value": 348,
- "name": "中介渠道: 34.8%"
- },
- {
- "value": 152,
- "name": "会员: 15.2%"
- },
- {
- "value": 500,
- "name": "散客: 50%"
- }
- ]
- }
- ],
- "seriesSpec": [
- {
- "matchInfo": {
- "specIndex": "all"
- },
- "spec": {
- "valueField": "value",
- "categoryField": "name",
- "radius": 1,
- "innerRadius": 0
- }
- }
- ],
- "panel": {
- "fill": "white",
- "shadowColor": "rgba(0, 0, 0, 0.05)",
- "shadowBlur": 10,
- "shadowOffsetX": 4,
- "shadowOffsetY": 4
+ "label": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
+ }
+ }
+ }
+ ],
+ "seriesSpec": [
+ {
+ "matchInfo": {
+ "specIndex": "all"
+ },
+ "spec": {
+ "xField": "x",
+ "yField": "y",
+ "seriesField": "type",
+ "point": {
+ "style": {
+ "size": 4
+ }
}
+ }
}
+ ],
+ "panel": {
+ "fill": "white",
+ "shadowColor": "rgba(0, 0, 0, 0.05)",
+ "shadowBlur": 10,
+ "shadowOffsetX": 4,
+ "shadowOffsetY": 4
+ }
+ }
+ },
+ {
+ "type": "RoseChart",
+ "id": "chart5",
+ "zIndex": 1,
+ "position": {
+ "top": 570,
+ "left": 120,
+ "width": 110,
+ "height": 110
},
- {
- "type": "ScatterChart",
- "id": "chart4",
- "zIndex": 1,
- "position": {
- "top": 50,
- "left": 800,
- "width": 110,
- "height": 110
+ "options": {
+ "attribute": {},
+ "title": {
+ "text": "Rose Chart",
+ "orient": "bottom",
+ "align": "center",
+ "textStyle": {
+ "fontSize": 10,
+ "lineHeight": 10
+ }
+ },
+ "padding": 12,
+ "data": [
+ {
+ "id": "data1",
+ "values": [
+ {
+ "value": 348,
+ "name": "中介渠道: 34.8%"
+ },
+ {
+ "value": 152,
+ "name": "会员: 15.2%"
+ },
+ {
+ "value": 500,
+ "name": "散客: 50%"
+ }
+ ]
+ }
+ ],
+ "seriesSpec": [
+ {
+ "matchInfo": {
+ "specIndex": "all"
+ },
+ "spec": {
+ "valueField": "value",
+ "seriesField": "name",
+ "categoryField": "name",
+ "radius": 1,
+ "innerRadius": 0
+ }
+ }
+ ],
+ "componentSpec": [
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "radius"
+ },
+ "spec": {
+ "domainLine": {
+ "visible": false,
+ "smooth": false
+ },
+ "label": {
+ "visible": false
+ },
+ "tick": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
+ }
+ }
},
- "options": {
- "attribute": {},
- "title": {
- "text": "Scatter Chart",
- "orient": "bottom",
- "align": "center",
- "textStyle": {
- "fontSize": 10,
- "lineHeight": 10
- }
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "angle"
+ },
+ "spec": {
+ "domainLine": {
+ "visible": false,
+ "smooth": false
},
- "padding": 12,
- "data": [
- {
- "id": "data2",
- "values": [
- {
- "x": 1,
- "y": 70,
- "type": "a"
- },
- {
- "x": 2,
- "y": 20,
- "type": "a"
- },
- {
- "x": 3,
- "y": 30,
- "type": "a"
- },
- {
- "x": 4,
- "y": 10,
- "type": "a"
- },
- {
- "x": 1,
- "y": 70,
- "type": "b"
- },
- {
- "x": 2,
- "y": 20,
- "type": "b"
- },
- {
- "x": 3,
- "y": 30,
- "type": "b"
- },
- {
- "x": 4,
- "y": 10,
- "type": "b"
- }
- ]
- }
- ],
- "componentSpec": [
- {
- "specKey": "axes",
- "matchInfo": {
- "orient": "bottom"
- },
- "spec": {
- "tick": {
- "visible": false
- },
- "label": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
- },
- {
- "specKey": "axes",
- "matchInfo": {
- "orient": "left"
- },
- "spec": {
- "tick": {
- "visible": false
- },
- "label": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
- }
- ],
- "seriesSpec": [
- {
- "matchInfo": {
- "specIndex": "all"
- },
- "spec": {
- "xField": "x",
- "yField": "y",
- "seriesField": "type",
- "point": {
- "style": {
- "size": 4
- }
- }
- }
- }
- ],
- "panel": {
- "fill": "white",
- "shadowColor": "rgba(0, 0, 0, 0.05)",
- "shadowBlur": 10,
- "shadowOffsetX": 4,
- "shadowOffsetY": 4
+ "label": {
+ "visible": false
+ },
+ "tick": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
}
+ }
}
+ ],
+ "panel": {
+ "fill": "white",
+ "shadowColor": "rgba(0, 0, 0, 0.05)",
+ "shadowBlur": 10,
+ "shadowOffsetX": 4,
+ "shadowOffsetY": 4
+ }
+ }
+ },
+ {
+ "type": "RadarChart",
+ "id": "chart6",
+ "zIndex": 1,
+ "position": {
+ "top": 570,
+ "left": 290,
+ "width": 110,
+ "height": 110
},
- {
- "type": "RoseChart",
- "id": "chart5",
- "zIndex": 1,
- "position": {
- "top": 570,
- "left": 120,
- "width": 110,
- "height": 110
+ "options": {
+ "attribute": {},
+ "title": {
+ "text": "Radar Chart",
+ "orient": "bottom",
+ "align": "center",
+ "textStyle": {
+ "fontSize": 10,
+ "lineHeight": 10
+ }
+ },
+ "padding": 12,
+ "data": [
+ {
+ "id": "data2",
+ "values": [
+ {
+ "theta": 0,
+ "type": "A",
+ "value": 833
+ },
+ {
+ "theta": 1,
+ "type": "A",
+ "value": 898
+ },
+ {
+ "theta": 2,
+ "type": "A",
+ "value": 672
+ },
+ {
+ "theta": 3,
+ "type": "A",
+ "value": 889
+ },
+ {
+ "theta": 4,
+ "type": "A",
+ "value": 889
+ },
+ {
+ "theta": 5,
+ "type": "A",
+ "value": 658
+ },
+ {
+ "theta": 6,
+ "type": "A",
+ "value": 822
+ },
+ {
+ "theta": 7,
+ "type": "A",
+ "value": 825
+ },
+ {
+ "theta": 0,
+ "type": "B",
+ "value": 659
+ },
+ {
+ "theta": 1,
+ "type": "B",
+ "value": 896
+ },
+ {
+ "theta": 2,
+ "type": "B",
+ "value": 822
+ },
+ {
+ "theta": 3,
+ "type": "B",
+ "value": 874
+ },
+ {
+ "theta": 4,
+ "type": "B",
+ "value": 742
+ },
+ {
+ "theta": 5,
+ "type": "B",
+ "value": 878
+ },
+ {
+ "theta": 6,
+ "type": "B",
+ "value": 643
+ },
+ {
+ "theta": 7,
+ "type": "B",
+ "value": 604
+ }
+ ]
+ }
+ ],
+ "seriesSpec": [
+ {
+ "matchInfo": {
+ "specIndex": "all"
+ },
+ "spec": {
+ "categoryField": "theta",
+ "valueField": "value",
+ "seriesField": "type",
+ "line": {
+ "style": {
+ "strokeWidth": 2
+ }
+ },
+ "legends": {
+ "visible": false
+ },
+ "label": {
+ "visible": false
+ },
+ "animationAppear": {
+ "preset": "clipIn"
+ },
+ "point": {
+ "style": {
+ "size": 2,
+ "strokeWidth": 1
+ }
+ },
+ "startAngle": 90
+ }
+ }
+ ],
+ "componentSpec": [
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "radius"
+ },
+ "spec": {
+ "domainLine": {
+ "visible": true,
+ "smooth": false
+ },
+ "label": {
+ "visible": false
+ },
+ "tick": {
+ "visible": false
+ },
+ "grid": {
+ "visible": true
+ }
+ }
},
- "options": {
- "attribute": {},
- "title": {
- "text": "Rose Chart",
- "orient": "bottom",
- "align": "center",
- "textStyle": {
- "fontSize": 10,
- "lineHeight": 10
- }
+ {
+ "specKey": "axes",
+ "matchInfo": {
+ "orient": "angle"
+ },
+ "spec": {
+ "domainLine": {
+ "visible": false,
+ "smooth": false
},
- "padding": 12,
- "data": [
- {
- "id": "data1",
- "values": [
- {
- "value": 348,
- "name": "中介渠道: 34.8%"
- },
- {
- "value": 152,
- "name": "会员: 15.2%"
- },
- {
- "value": 500,
- "name": "散客: 50%"
- }
- ]
- }
- ],
- "seriesSpec": [
- {
- "matchInfo": {
- "specIndex": "all"
- },
- "spec": {
- "valueField": "value",
- "seriesField": "name",
- "categoryField": "name",
- "radius": 1,
- "innerRadius": 0
- }
- }
- ],
- "componentSpec": [
- {
- "specKey": "axes",
- "matchInfo": {
- "orient": "radius"
- },
- "spec": {
- "domainLine": {
- "visible": false,
- "smooth": false
- },
- "label": {
- "visible": false
- },
- "tick": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
- },
- {
- "specKey": "axes",
- "matchInfo": {
- "orient": "angle"
- },
- "spec": {
- "domainLine": {
- "visible": false,
- "smooth": false
- },
- "label": {
- "visible": false
- },
- "tick": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
- }
- ],
- "panel": {
- "fill": "white",
- "shadowColor": "rgba(0, 0, 0, 0.05)",
- "shadowBlur": 10,
- "shadowOffsetX": 4,
- "shadowOffsetY": 4
+ "label": {
+ "visible": false
+ },
+ "grid": {
+ "visible": false
+ }
+ }
+ }
+ ],
+ "panel": {
+ "fill": "white",
+ "shadowColor": "rgba(0, 0, 0, 0.05)",
+ "shadowBlur": 10,
+ "shadowOffsetX": 4,
+ "shadowOffsetY": 4
+ }
+ }
+ },
+ {
+ "type": "WordCloudChart",
+ "id": "chart7",
+ "zIndex": 1,
+ "position": {
+ "top": 570,
+ "left": 460,
+ "width": 110,
+ "height": 110
+ },
+ "options": {
+ "attribute": {},
+ "title": {
+ "text": "Word Cloud",
+ "orient": "bottom",
+ "align": "center",
+ "textStyle": {
+ "fontSize": 10,
+ "lineHeight": 10
+ }
+ },
+ "padding": 12,
+ "data": [
+ {
+ "id": "data1",
+ "values": [
+ {
+ "challenge_id": 1658490688121879,
+ "challenge_name": "宅家剧场",
+ "sum_count": 128
+ },
+ {
+ "challenge_id": 1640007327696910,
+ "challenge_name": "我的观影报告",
+ "sum_count": 103
+ },
+ {
+ "challenge_id": 1557656100811777,
+ "challenge_name": "抖瓜小助手",
+ "sum_count": 76
+ },
+ {
+ "challenge_id": 1553513807372289,
+ "challenge_name": "搞笑",
+ "sum_count": 70
+ },
+ {
+ "challenge_id": 1599321527572563,
+ "challenge_name": "我要上热门",
+ "sum_count": 69
}
+ ]
}
- },
- {
- "type": "RadarChart",
- "id": "chart6",
- "zIndex": 1,
- "position": {
- "top": 570,
- "left": 290,
- "width": 110,
- "height": 110
- },
- "options": {
- "attribute": {},
- "title": {
- "text": "Radar Chart",
- "orient": "bottom",
- "align": "center",
- "textStyle": {
- "fontSize": 10,
- "lineHeight": 10
- }
+ ],
+ "seriesSpec": [
+ {
+ "matchInfo": {
+ "specIndex": "all"
+ },
+ "spec": {
+ "valueField": "sum_count",
+ "seriesField": "challenge_name",
+ "nameField": "challenge_name",
+ "wordCloudConfig": {
+ "drawOutOfBound": "clip"
},
- "padding": 12,
- "data": [
- {
- "id": "data2",
- "values": [
- {
- "theta": 0,
- "type": "A",
- "value": 833
- },
- {
- "theta": 1,
- "type": "A",
- "value": 898
- },
- {
- "theta": 2,
- "type": "A",
- "value": 672
- },
- {
- "theta": 3,
- "type": "A",
- "value": 889
- },
- {
- "theta": 4,
- "type": "A",
- "value": 889
- },
- {
- "theta": 5,
- "type": "A",
- "value": 658
- },
- {
- "theta": 6,
- "type": "A",
- "value": 822
- },
- {
- "theta": 7,
- "type": "A",
- "value": 825
- },
- {
- "theta": 0,
- "type": "B",
- "value": 659
- },
- {
- "theta": 1,
- "type": "B",
- "value": 896
- },
- {
- "theta": 2,
- "type": "B",
- "value": 822
- },
- {
- "theta": 3,
- "type": "B",
- "value": 874
- },
- {
- "theta": 4,
- "type": "B",
- "value": 742
- },
- {
- "theta": 5,
- "type": "B",
- "value": 878
- },
- {
- "theta": 6,
- "type": "B",
- "value": 643
- },
- {
- "theta": 7,
- "type": "B",
- "value": 604
- }
- ]
- }
- ],
- "seriesSpec": [
- {
- "matchInfo": {
- "specIndex": "all"
- },
- "spec": {
- "categoryField": "theta",
- "valueField": "value",
- "seriesField": "type",
- "line": {
- "style": {
- "strokeWidth": 2
- }
- },
- "legends": {
- "visible": false
- },
- "label": {
- "visible": false
- },
- "animationAppear": {
- "preset": "clipIn"
- },
- "point": {
- "style": {
- "size": 2,
- "strokeWidth": 1
- }
- },
- "startAngle": 90
- }
- }
- ],
- "componentSpec": [
+ "maskShape": "circle",
+ "fontSizeRange": [5, 8]
+ }
+ }
+ ],
+ "panel": {
+ "fill": "white",
+ "shadowColor": "rgba(0, 0, 0, 0.05)",
+ "shadowBlur": 10,
+ "shadowOffsetX": 4,
+ "shadowOffsetY": 4
+ }
+ }
+ },
+ {
+ "type": "TreeMapChart",
+ "id": "chart8",
+ "zIndex": 1,
+ "position": {
+ "top": 570,
+ "left": 630,
+ "width": 110,
+ "height": 110
+ },
+ "options": {
+ "attribute": {},
+ "title": {
+ "text": "TreeMap Chart",
+ "orient": "bottom",
+ "align": "center",
+ "textStyle": {
+ "fontSize": 10,
+ "lineHeight": 10
+ }
+ },
+ "padding": 12,
+ "data": [
+ {
+ "id": "data",
+ "values": [
+ {
+ "name": "Second",
+ "children": [
{
- "specKey": "axes",
- "matchInfo": {
- "orient": "radius"
- },
- "spec": {
- "domainLine": {
- "visible": true,
- "smooth": false
- },
- "label": {
- "visible": false
- },
- "tick": {
- "visible": false
- },
- "grid": {
- "visible": true
- }
- }
+ "name": "B2",
+ "value": 98
},
{
- "specKey": "axes",
- "matchInfo": {
- "orient": "angle"
- },
- "spec": {
- "domainLine": {
- "visible": false,
- "smooth": false
- },
- "label": {
- "visible": false
- },
- "grid": {
- "visible": false
- }
- }
- }
- ],
- "panel": {
- "fill": "white",
- "shadowColor": "rgba(0, 0, 0, 0.05)",
- "shadowBlur": 10,
- "shadowOffsetX": 4,
- "shadowOffsetY": 4
- }
- }
- },
- {
- "type": "WordCloudChart",
- "id": "chart7",
- "zIndex": 1,
- "position": {
- "top": 570,
- "left": 460,
- "width": 110,
- "height": 110
- },
- "options": {
- "attribute": {},
- "title": {
- "text": "Word Cloud",
- "orient": "bottom",
- "align": "center",
- "textStyle": {
- "fontSize": 10,
- "lineHeight": 10
+ "name": "B3",
+ "value": 56
}
+ ]
},
- "padding": 12,
- "data": [
+ {
+ "name": "First",
+ "children": [
{
- "id": "data1",
- "values": [
- {
- "challenge_id": 1658490688121879,
- "challenge_name": "宅家剧场",
- "sum_count": 128
- },
- {
- "challenge_id": 1640007327696910,
- "challenge_name": "我的观影报告",
- "sum_count": 103
- },
- {
- "challenge_id": 1557656100811777,
- "challenge_name": "抖瓜小助手",
- "sum_count": 76
- },
- {
- "challenge_id": 1553513807372289,
- "challenge_name": "搞笑",
- "sum_count": 70
- },
- {
- "challenge_id": 1599321527572563,
- "challenge_name": "我要上热门",
- "sum_count": 69
- }
- ]
- }
- ],
- "seriesSpec": [
+ "name": "A2",
+ "value": 60
+ },
{
- "matchInfo": {
- "specIndex": "all"
- },
- "spec": {
- "valueField": "sum_count",
- "seriesField": "challenge_name",
- "nameField": "challenge_name",
- "wordCloudConfig": {
- "drawOutOfBound": "clip"
- },
- "maskShape": "circle",
- "fontSizeRange": [
- 5,
- 8
- ]
- }
- }
- ],
- "panel": {
- "fill": "white",
- "shadowColor": "rgba(0, 0, 0, 0.05)",
- "shadowBlur": 10,
- "shadowOffsetX": 4,
- "shadowOffsetY": 4
- }
- }
- },
- {
- "type": "TreeMapChart",
- "id": "chart8",
- "zIndex": 1,
- "position": {
- "top": 570,
- "left": 630,
- "width": 110,
- "height": 110
- },
- "options": {
- "attribute": {},
- "title": {
- "text": "TreeMap Chart",
- "orient": "bottom",
- "align": "center",
- "textStyle": {
- "fontSize": 10,
- "lineHeight": 10
+ "name": "A3",
+ "value": 30
}
+ ]
},
- "padding": 12,
- "data": [
+ {
+ "name": "Third",
+ "children": [
{
- "id": "data",
- "values": [
- {
- "name": "Second",
- "children": [
- {
- "name": "B2",
- "value": 98
- },
- {
- "name": "B3",
- "value": 56
- }
- ]
- },
- {
- "name": "First",
- "children": [
- {
- "name": "A2",
- "value": 60
- },
- {
- "name": "A3",
- "value": 30
- }
- ]
- },
- {
- "name": "Third",
- "children": [
- {
- "name": "C1",
- "value": 33
- },
- {
- "name": "C2",
- "value": 30
- },
- {
- "name": "C3",
- "value": 40
- }
- ]
- },
- {
- "name": "Fourth",
- "children": [
- {
- "name": "D4",
- "value": 64
- },
- {
- "name": "D5",
- "value": 60
- }
- ]
- }
- ]
- }
- ],
- "seriesSpec": [
+ "name": "C1",
+ "value": 33
+ },
{
- "matchInfo": {
- "specIndex": "all"
- },
- "spec": {
- "categoryField": "name",
- "valueField": "value",
- "legends": {
- "visible": false
- },
- "nodePadding": 1,
- "nonLeaf": {
- "visible": false
- },
- "nonLeafLabel": {
- "visible": false
- },
- "label": {
- "visible": false
- }
- }
- }
- ],
- "panel": {
- "fill": "white",
- "shadowColor": "rgba(0, 0, 0, 0.05)",
- "shadowBlur": 10,
- "shadowOffsetX": 4,
- "shadowOffsetY": 4
- }
- }
- },
- {
- "type": "SunburstChart",
- "id": "chart9",
- "zIndex": 1,
- "position": {
- "top": 570,
- "left": 800,
- "width": 110,
- "height": 110
- },
- "options": {
- "attribute": {},
- "title": {
- "text": "Sunburst Chart",
- "orient": "bottom",
- "align": "center",
- "textStyle": {
- "fontSize": 10,
- "lineHeight": 10
+ "name": "C2",
+ "value": 30
+ },
+ {
+ "name": "C3",
+ "value": 40
}
+ ]
},
- "padding": 12,
- "data": [
+ {
+ "name": "Fourth",
+ "children": [
{
- "id": "data",
- "values": [
- {
- "name": "Grandpa",
- "children": [
- {
- "name": "Uncle Leo",
- "value": 15,
- "children": [
- {
- "name": "Cousin Jack",
- "value": 2
- },
- {
- "name": "Cousin Mary",
- "value": 5,
- "children": [
- {
- "name": "Jackson",
- "value": 2
- }
- ]
- },
- {
- "name": "Cousin Ben",
- "value": 4
- }
- ]
- },
- {
- "name": "Father",
- "value": 10,
- "children": [
- {
- "name": "Me",
- "value": 5
- },
- {
- "name": "Brother Peter",
- "value": 1
- }
- ]
- }
- ]
- },
- {
- "name": "Nancy",
- "children": [
- {
- "name": "Uncle Nike",
- "children": [
- {
- "name": "Cousin Betty",
- "value": 1
- },
- {
- "name": "Cousin Jenny",
- "value": 2
- }
- ]
- }
- ]
- }
- ]
- }
- ],
- "seriesSpec": [
+ "name": "D4",
+ "value": 64
+ },
{
- "matchInfo": {
- "specIndex": "all"
- },
- "spec": {
- "offsetX": 0,
- "offsetY": 0,
- "categoryField": "name",
- "valueField": "value",
- "outerRadius": 1,
- "innerRadius": 0,
- "label": {
- "visible": false
- }
- }
+ "name": "D5",
+ "value": 60
}
- ],
- "panel": {
- "fill": "white",
- "shadowColor": "rgba(0, 0, 0, 0.05)",
- "shadowBlur": 10,
- "shadowOffsetX": 4,
- "shadowOffsetY": 4
- }
- }
- },
- {
- "type": "TextComponent",
- "id": "title1",
- "zIndex": 1,
- "position": {
- "top": 300,
- "left": 500,
- "width": 500,
- "height": 200
- },
- "options": {
- "graphic": {
- "text": "A BRIEF HISTORY",
- "fontSize": 55,
- "fontWeight": "bold"
- }
- }
- },
- {
- "type": "TextComponent",
- "id": "title2",
- "zIndex": 1,
- "position": {
- "top": 380,
- "left": 500,
- "width": 400,
- "height": 60
- },
- "options": {
- "graphic": {
- "text": "OF CHARTS",
- "fontSize": 55,
- "fontWeight": "bold"
+ ]
}
+ ]
}
- },
- {
- "type": "RichTextComponent",
- "id": "titlesubtitle",
- "zIndex": 1,
- "position": {
- "top": 450,
- "left": 600,
- "width": 400,
- "height": 80
- },
- "options": {
- "graphic": {
- "width": 400,
- "fontSize": 22,
- "fontWeight": "bold",
- "textConfig": [
- {
- "text": "Powered By "
- },
- {
- "text": "VChart",
- "fill": "blue"
- }
- ]
+ ],
+ "seriesSpec": [
+ {
+ "matchInfo": {
+ "specIndex": "all"
+ },
+ "spec": {
+ "categoryField": "name",
+ "valueField": "value",
+ "legends": {
+ "visible": false
+ },
+ "nodePadding": 1,
+ "nonLeaf": {
+ "visible": false
+ },
+ "nonLeafLabel": {
+ "visible": false
+ },
+ "label": {
+ "visible": false
}
+ }
}
+ ],
+ "panel": {
+ "fill": "white",
+ "shadowColor": "rgba(0, 0, 0, 0.05)",
+ "shadowBlur": 10,
+ "shadowOffsetX": 4,
+ "shadowOffsetY": 4
+ }
+ }
+ },
+ {
+ "type": "SunburstChart",
+ "id": "chart9",
+ "zIndex": 1,
+ "position": {
+ "top": 570,
+ "left": 800,
+ "width": 110,
+ "height": 110
},
- {
- "type": "TextComponent",
- "id": "scene2-title2",
- "zIndex": 1,
- "position": {
- "top": 50,
- "left": 150,
- "width": 200,
- "height": 20
- },
- "options": {
- "graphic": {
- "width": 400,
- "fontSize": 12,
- "fill": "#292729",
- "text": "DEVELOPMENT ROADMAP"
- }
+ "options": {
+ "attribute": {},
+ "title": {
+ "text": "Sunburst Chart",
+ "orient": "bottom",
+ "align": "center",
+ "textStyle": {
+ "fontSize": 10,
+ "lineHeight": 10
}
- }
- ],
- "acts": [
- {
- "id": "default-chapter",
- "scenes": [
+ },
+ "padding": 12,
+ "data": [
+ {
+ "id": "data",
+ "values": [
{
- "id": "scene1",
- "actions": [
- {
- "characterId": "chart0",
- "characterActions": [
- {
- "startTime": 500,
- "duration": 1000,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart1",
- "characterActions": [
- {
- "startTime": 800,
- "duration": 1000,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart2",
- "characterActions": [
- {
- "startTime": 1100,
- "duration": 1000,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart3",
- "characterActions": [
- {
- "startTime": 1400,
- "duration": 1000,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart4",
- "characterActions": [
- {
- "startTime": 1700,
- "duration": 1000,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart9",
- "characterActions": [
- {
- "startTime": 500,
- "duration": 1000,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart8",
- "characterActions": [
- {
- "startTime": 800,
- "duration": 1000,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart7",
- "characterActions": [
- {
- "startTime": 1100,
- "duration": 1000,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart6",
- "characterActions": [
- {
- "startTime": 1400,
- "duration": 1000,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart5",
- "characterActions": [
- {
- "startTime": 1700,
- "duration": 1000,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "title1",
- "characterActions": [
- {
- "startTime": 1500,
- "duration": 500,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 500,
- "effect": "typewriter",
- "easing": "quadIn"
- }
- }
- }
- ]
- },
- {
- "characterId": "title2",
- "characterActions": [
- {
- "startTime": 2000,
- "duration": 500,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 500,
- "effect": "typewriter",
- "easing": "quadIn"
- }
- }
- }
- ]
- },
- {
- "characterId": "chart9",
- "characterActions": [
- {
- "startTime": 2500,
- "duration": 2000,
- "action": "bounce",
- "payload": {
- "animation": {
- "duration": 2000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart8",
- "characterActions": [
- {
- "startTime": 2600,
- "duration": 2000,
- "action": "bounce",
- "payload": {
- "animation": {
- "duration": 2000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart7",
- "characterActions": [
- {
- "startTime": 2700,
- "duration": 2000,
- "action": "bounce",
- "payload": {
- "animation": {
- "duration": 2000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart6",
- "characterActions": [
- {
- "startTime": 2800,
- "duration": 2000,
- "action": "bounce",
- "payload": {
- "animation": {
- "duration": 2000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart5",
- "characterActions": [
- {
- "startTime": 2900,
- "duration": 2000,
- "action": "bounce",
- "payload": {
- "animation": {
- "duration": 2000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart0",
- "characterActions": [
- {
- "startTime": 2500,
- "duration": 2000,
- "action": "bounce",
- "payload": {
- "animation": {
- "duration": 2000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart1",
- "characterActions": [
- {
- "startTime": 2600,
- "duration": 2000,
- "action": "bounce",
- "payload": {
- "animation": {
- "duration": 2000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart2",
- "characterActions": [
- {
- "startTime": 2700,
- "duration": 2000,
- "action": "bounce",
- "payload": {
- "animation": {
- "duration": 2000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart3",
- "characterActions": [
- {
- "startTime": 2800,
- "duration": 2000,
- "action": "bounce",
- "payload": {
- "animation": {
- "duration": 2000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart4",
- "characterActions": [
- {
- "startTime": 2900,
- "duration": 2000,
- "action": "bounce",
- "payload": {
- "animation": {
- "duration": 2000
- }
- }
- }
- ]
- },
- {
- "characterId": "titlesubtitle",
- "characterActions": [
- {
- "startTime": 2700,
- "duration": 500,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 200,
- "easing": "linear",
- "effect": "fade"
- }
- }
- }
- ]
- },
- {
- "characterId": "chart9",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart8",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart7",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart6",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart5",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
- {
- "characterId": "chart4",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
+ "name": "Grandpa",
+ "children": [
+ {
+ "name": "Uncle Leo",
+ "value": 15,
+ "children": [
{
- "characterId": "chart3",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
+ "name": "Cousin Jack",
+ "value": 2
},
{
- "characterId": "chart2",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
+ "name": "Cousin Mary",
+ "value": 5,
+ "children": [
+ {
+ "name": "Jackson",
+ "value": 2
+ }
+ ]
},
{
- "characterId": "chart1",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
- },
+ "name": "Cousin Ben",
+ "value": 4
+ }
+ ]
+ },
+ {
+ "name": "Father",
+ "value": 10,
+ "children": [
{
- "characterId": "chart0",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000
- }
- }
- }
- ]
+ "name": "Me",
+ "value": 5
},
{
- "characterId": "titlesubtitle",
- "characterActions": [
- {
- "startTime": 6000,
- "duration": 1000,
- "action": "disappear",
- "payload": {
- "animation": {
- "duration": 1000,
- "easing": "linear",
- "effect": "fade"
- }
- }
- }
- ]
+ "name": "Brother Peter",
+ "value": 1
}
- ]
+ ]
+ }
+ ]
},
{
- "id": "scene2",
- "actions": [
- {
- "characterId": "title1",
- "characterActions": [
- {
- "startTime": 0,
- "duration": 800,
- "action": "moveTo",
- "destination": {
- "x": 250,
- "y": 80
- },
- "payload": {
- "animation": {
- "duration": 800,
- "easing": "quadInOut"
- }
- }
- },
- {
- "startTime": 0,
- "duration": 800,
- "action": "style",
- "payload": {
- "graphic": {
- "fontSize": 40
- },
- "animation": {
- "duration": 800
- }
- }
- }
- ]
- },
- {
- "characterId": "title2",
- "characterActions": [
- {
- "startTime": 0,
- "duration": 800,
- "action": "moveTo",
- "destination": {
- "x": 550,
- "y": 80
- },
- "payload": {
- "animation": {
- "duration": 800,
- "easing": "quadInOut"
- }
- }
- },
- {
- "startTime": 0,
- "duration": 800,
- "action": "style",
- "payload": {
- "graphic": {
- "fontSize": 40
- },
- "animation": {
- "duration": 800,
- "easing": "quadInOut"
- }
- }
- }
- ]
- },
- {
- "characterId": "scene2-title2",
- "characterActions": [
- {
- "startTime": 800,
- "duration": 800,
- "action": "appear",
- "payload": {
- "animation": {
- "duration": 800,
- "easing": "linear",
- "effect": "fade"
- }
- }
- }
- ]
- },
- {
- "characterId": "title1",
- "characterActions": [
- {
- "startTime": 2000,
- "duration": 800,
- "action": "moveTo",
- "destination": {
- "x": -650,
- "y": 80
- },
- "payload": {
- "animation": {
- "duration": 800,
- "easing": "quadInOut"
- }
- }
- }
- ]
- },
+ "name": "Nancy",
+ "children": [
+ {
+ "name": "Uncle Nike",
+ "children": [
{
- "characterId": "title2",
- "characterActions": [
- {
- "startTime": 2000,
- "duration": 800,
- "action": "moveTo",
- "destination": {
- "x": -350,
- "y": 80
- },
- "payload": {
- "animation": {
- "duration": 800,
- "easing": "quadInOut"
- }
- }
- }
- ]
+ "name": "Cousin Betty",
+ "value": 1
},
{
- "characterId": "scene2-title2",
- "characterActions": [
- {
- "startTime": 2000,
- "duration": 800,
- "action": "moveTo",
- "destination": {
- "x": -750,
- "y": 80
- },
- "payload": {
- "animation": {
- "duration": 800,
- "easing": "quadInOut"
- }
- }
- }
- ]
+ "name": "Cousin Jenny",
+ "value": 2
}
- ]
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "seriesSpec": [
+ {
+ "matchInfo": {
+ "specIndex": "all"
+ },
+ "spec": {
+ "offsetX": 0,
+ "offsetY": 0,
+ "categoryField": "name",
+ "valueField": "value",
+ "outerRadius": 1,
+ "innerRadius": 0,
+ "label": {
+ "visible": false
}
+ }
+ }
+ ],
+ "panel": {
+ "fill": "white",
+ "shadowColor": "rgba(0, 0, 0, 0.05)",
+ "shadowBlur": 10,
+ "shadowOffsetX": 4,
+ "shadowOffsetY": 4
+ }
+ }
+ },
+ {
+ "type": "Text",
+ "id": "title1",
+ "zIndex": 1,
+ "position": {
+ "top": 300,
+ "left": 500,
+ "width": 500,
+ "height": 200
+ },
+ "options": {
+ "graphic": {
+ "text": "A BRIEF HISTORY",
+ "fontSize": 55,
+ "fontWeight": "bold"
+ }
+ }
+ },
+ {
+ "type": "Text",
+ "id": "title2",
+ "zIndex": 1,
+ "position": {
+ "top": 380,
+ "left": 500,
+ "width": 400,
+ "height": 60
+ },
+ "options": {
+ "graphic": {
+ "text": "OF CHARTS",
+ "fontSize": 55,
+ "fontWeight": "bold"
+ }
+ }
+ },
+ {
+ "type": "RichText",
+ "id": "titlesubtitle",
+ "zIndex": 1,
+ "position": {
+ "top": 450,
+ "left": 600,
+ "width": 400,
+ "height": 80
+ },
+ "options": {
+ "graphic": {
+ "width": 400,
+ "fontSize": 22,
+ "fontWeight": "bold",
+ "textConfig": [
+ {
+ "text": "Powered By "
+ },
+ {
+ "text": "VChart",
+ "fill": "blue"
+ }
]
+ }
+ }
+ },
+ {
+ "type": "Text",
+ "id": "scene2-title2",
+ "zIndex": 1,
+ "position": {
+ "top": 50,
+ "left": 150,
+ "width": 200,
+ "height": 20
+ },
+ "options": {
+ "graphic": {
+ "width": 400,
+ "fontSize": 12,
+ "fill": "#292729",
+ "text": "DEVELOPMENT ROADMAP"
+ }
}
+ }
+ ],
+ "acts": [
+ {
+ "id": "default-chapter",
+ "scenes": [
+ {
+ "id": "scene1",
+ "actions": [
+ {
+ "characterId": "chart0",
+ "characterActions": [
+ {
+ "startTime": 500,
+ "duration": 1000,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart1",
+ "characterActions": [
+ {
+ "startTime": 800,
+ "duration": 1000,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart2",
+ "characterActions": [
+ {
+ "startTime": 1100,
+ "duration": 1000,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart3",
+ "characterActions": [
+ {
+ "startTime": 1400,
+ "duration": 1000,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart4",
+ "characterActions": [
+ {
+ "startTime": 1700,
+ "duration": 1000,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart9",
+ "characterActions": [
+ {
+ "startTime": 500,
+ "duration": 1000,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart8",
+ "characterActions": [
+ {
+ "startTime": 800,
+ "duration": 1000,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart7",
+ "characterActions": [
+ {
+ "startTime": 1100,
+ "duration": 1000,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart6",
+ "characterActions": [
+ {
+ "startTime": 1400,
+ "duration": 1000,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart5",
+ "characterActions": [
+ {
+ "startTime": 1700,
+ "duration": 1000,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "title1",
+ "characterActions": [
+ {
+ "startTime": 1500,
+ "duration": 500,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 500,
+ "effect": "typewriter",
+ "easing": "quadIn"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "title2",
+ "characterActions": [
+ {
+ "startTime": 2000,
+ "duration": 500,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 500,
+ "effect": "typewriter",
+ "easing": "quadIn"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart9",
+ "characterActions": [
+ {
+ "startTime": 2500,
+ "duration": 2000,
+ "action": "bounce",
+ "payload": {
+ "animation": {
+ "duration": 2000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart8",
+ "characterActions": [
+ {
+ "startTime": 2600,
+ "duration": 2000,
+ "action": "bounce",
+ "payload": {
+ "animation": {
+ "duration": 2000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart7",
+ "characterActions": [
+ {
+ "startTime": 2700,
+ "duration": 2000,
+ "action": "bounce",
+ "payload": {
+ "animation": {
+ "duration": 2000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart6",
+ "characterActions": [
+ {
+ "startTime": 2800,
+ "duration": 2000,
+ "action": "bounce",
+ "payload": {
+ "animation": {
+ "duration": 2000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart5",
+ "characterActions": [
+ {
+ "startTime": 2900,
+ "duration": 2000,
+ "action": "bounce",
+ "payload": {
+ "animation": {
+ "duration": 2000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart0",
+ "characterActions": [
+ {
+ "startTime": 2500,
+ "duration": 2000,
+ "action": "bounce",
+ "payload": {
+ "animation": {
+ "duration": 2000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart1",
+ "characterActions": [
+ {
+ "startTime": 2600,
+ "duration": 2000,
+ "action": "bounce",
+ "payload": {
+ "animation": {
+ "duration": 2000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart2",
+ "characterActions": [
+ {
+ "startTime": 2700,
+ "duration": 2000,
+ "action": "bounce",
+ "payload": {
+ "animation": {
+ "duration": 2000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart3",
+ "characterActions": [
+ {
+ "startTime": 2800,
+ "duration": 2000,
+ "action": "bounce",
+ "payload": {
+ "animation": {
+ "duration": 2000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart4",
+ "characterActions": [
+ {
+ "startTime": 2900,
+ "duration": 2000,
+ "action": "bounce",
+ "payload": {
+ "animation": {
+ "duration": 2000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "titlesubtitle",
+ "characterActions": [
+ {
+ "startTime": 2700,
+ "duration": 500,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 200,
+ "easing": "linear",
+ "effect": "fade"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart9",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart8",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart7",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart6",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart5",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart4",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart3",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart2",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart1",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "chart0",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "titlesubtitle",
+ "characterActions": [
+ {
+ "startTime": 6000,
+ "duration": 1000,
+ "action": "disappear",
+ "payload": {
+ "animation": {
+ "duration": 1000,
+ "easing": "linear",
+ "effect": "fade"
+ }
+ }
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "id": "scene2",
+ "actions": [
+ {
+ "characterId": "title1",
+ "characterActions": [
+ {
+ "startTime": 0,
+ "duration": 800,
+ "action": "moveTo",
+ "destination": {
+ "x": 250,
+ "y": 80
+ },
+ "payload": {
+ "animation": {
+ "duration": 800,
+ "easing": "quadInOut"
+ }
+ }
+ },
+ {
+ "startTime": 0,
+ "duration": 800,
+ "action": "style",
+ "payload": {
+ "graphic": {
+ "fontSize": 40
+ },
+ "animation": {
+ "duration": 800
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "title2",
+ "characterActions": [
+ {
+ "startTime": 0,
+ "duration": 800,
+ "action": "moveTo",
+ "destination": {
+ "x": 550,
+ "y": 80
+ },
+ "payload": {
+ "animation": {
+ "duration": 800,
+ "easing": "quadInOut"
+ }
+ }
+ },
+ {
+ "startTime": 0,
+ "duration": 800,
+ "action": "style",
+ "payload": {
+ "graphic": {
+ "fontSize": 40
+ },
+ "animation": {
+ "duration": 800,
+ "easing": "quadInOut"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "scene2-title2",
+ "characterActions": [
+ {
+ "startTime": 800,
+ "duration": 800,
+ "action": "appear",
+ "payload": {
+ "animation": {
+ "duration": 800,
+ "easing": "linear",
+ "effect": "fade"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "title1",
+ "characterActions": [
+ {
+ "startTime": 2000,
+ "duration": 800,
+ "action": "moveTo",
+ "destination": {
+ "x": -650,
+ "y": 80
+ },
+ "payload": {
+ "animation": {
+ "duration": 800,
+ "easing": "quadInOut"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "title2",
+ "characterActions": [
+ {
+ "startTime": 2000,
+ "duration": 800,
+ "action": "moveTo",
+ "destination": {
+ "x": -350,
+ "y": 80
+ },
+ "payload": {
+ "animation": {
+ "duration": 800,
+ "easing": "quadInOut"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "characterId": "scene2-title2",
+ "characterActions": [
+ {
+ "startTime": 2000,
+ "duration": 800,
+ "action": "moveTo",
+ "destination": {
+ "x": -750,
+ "y": 80
+ },
+ "payload": {
+ "animation": {
+ "duration": 800,
+ "easing": "quadInOut"
+ }
+ }
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
]
}
diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx
index 3841a316..61c28057 100644
--- a/packages/vstory/demo/src/App.tsx
+++ b/packages/vstory/demo/src/App.tsx
@@ -18,6 +18,7 @@ import { Pictogram } from './demos/infographics/Pictogram';
import { LV_BAR1 } from './demos/lv/bar1';
import { BarLineSeries } from './demos/BarLineSeries';
import { wordcloud } from './demos/wordcloud';
+import { BaseComponent } from './demos/BaseComponent';
type MenusType = (
| {
@@ -98,6 +99,10 @@ const App = () => {
name: 'wordcloud',
component: wordcloud
},
+ {
+ name: 'BaseComponent',
+ component: BaseComponent
+ },
{
name: 'lv_chart',
subMenus: [
diff --git a/packages/vstory/demo/src/demos/BaseComponent.tsx b/packages/vstory/demo/src/demos/BaseComponent.tsx
new file mode 100644
index 00000000..17121157
--- /dev/null
+++ b/packages/vstory/demo/src/demos/BaseComponent.tsx
@@ -0,0 +1,116 @@
+import React, { useEffect } from 'react';
+import { IStorySpec } from '../../../src/story/interface';
+import { Story } from '../../../src/story/story';
+import '../../../src/story/index';
+// import { Animate } from '@visactor/vrender-core';
+
+// Animate.AddInterpolate('clipRange', (k, r, from, to, target, out) => {
+// console.log('animate', k, r, from, to);
+// });
+
+export const BaseComponent = () => {
+ const id = 'storyBar';
+
+ useEffect(() => {
+ // 准备一个图表
+ const tempSpec: IStorySpec = {
+ characters: [
+ ...new Array(3).fill(0).map((_, i) => {
+ return {
+ type: 'Rect',
+ id: 'rect' + i,
+ zIndex: 10,
+ position: {
+ top: 20,
+ left: 20 + i * 50,
+ width: 30,
+ height: 30
+ },
+ options: {
+ graphic: {
+ fill: 'red',
+ // background: '/assets/scene4/matrix.png',
+ stroke: false
+ }
+ }
+ };
+ }),
+ ...new Array(3).fill(0).map((_, i) => {
+ return {
+ type: 'Line',
+ id: 'line' + i,
+ zIndex: 10,
+ position: {
+ top: 80,
+ left: 20 + i * 50,
+ width: 30,
+ height: 30
+ },
+ options: {
+ graphic: {
+ stroke: 'red',
+ lineWith: 10,
+ points: [
+ { x: 0, y: 0 },
+ { x: 30, y: 30 }
+ ]
+ // background: '/assets/scene4/matrix.png',
+ // stroke: false
+ }
+ }
+ };
+ })
+ ],
+ acts: [
+ {
+ id: 'default-chapter',
+ scenes: [
+ {
+ id: 'scene0',
+ actions: [
+ ...new Array(3).fill(0).map((_, i) => {
+ return {
+ characterId: 'rect' + i,
+ characterActions: [
+ {
+ startTime: i * 1000,
+ action: 'appear',
+ payload: {
+ animation: {
+ duration: 700,
+ effect: ['fadeIn', 'scaleIn', 'wipeIn'][i]
+ }
+ }
+ }
+ ]
+ };
+ }),
+ ...new Array(3).fill(0).map((_, i) => {
+ return {
+ characterId: 'line' + i,
+ characterActions: [
+ {
+ startTime: i * 1000,
+ action: 'appear',
+ payload: {
+ animation: {
+ duration: 700,
+ effect: ['fadeIn', 'scaleIn', 'wipeIn'][i]
+ }
+ }
+ }
+ ]
+ };
+ })
+ ]
+ }
+ ]
+ }
+ ]
+ };
+ const story = new Story(tempSpec, { dom: id });
+ story.play();
+ }, []);
+
+ return ;
+};
diff --git a/packages/vstory/demo/src/demos/DisAppear.tsx b/packages/vstory/demo/src/demos/DisAppear.tsx
index eb4250cd..bc159b6b 100644
--- a/packages/vstory/demo/src/demos/DisAppear.tsx
+++ b/packages/vstory/demo/src/demos/DisAppear.tsx
@@ -11,7 +11,7 @@ export const DisAppear = () => {
try {
const bgCharacters = [
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'bg-1',
zIndex: -1,
position: {
@@ -27,7 +27,7 @@ export const DisAppear = () => {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'bg-2',
zIndex: -1,
position: {
@@ -47,7 +47,7 @@ export const DisAppear = () => {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'bg-3',
zIndex: -1,
position: {
diff --git a/packages/vstory/demo/src/demos/GraphicEdit.tsx b/packages/vstory/demo/src/demos/GraphicEdit.tsx
index 98bf8e94..04a2bd9b 100644
--- a/packages/vstory/demo/src/demos/GraphicEdit.tsx
+++ b/packages/vstory/demo/src/demos/GraphicEdit.tsx
@@ -17,7 +17,7 @@ export const GraphicEdit = () => {
const tempSpec: IStorySpec = {
characters: [
{
- type: 'RichTextComponent',
+ type: 'RichText',
id: `richtext`,
zIndex: 1,
position: {
@@ -44,7 +44,7 @@ export const GraphicEdit = () => {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'rect',
zIndex: 0,
position: {
@@ -67,7 +67,7 @@ export const GraphicEdit = () => {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `image`,
zIndex: 1,
position: {
diff --git a/packages/vstory/demo/src/demos/Playground.tsx b/packages/vstory/demo/src/demos/Playground.tsx
index e8effbff..e3e18179 100644
--- a/packages/vstory/demo/src/demos/Playground.tsx
+++ b/packages/vstory/demo/src/demos/Playground.tsx
@@ -1052,7 +1052,7 @@ const scene1 = {
const scene2Characters = [
{
- type: 'TextComponent',
+ type: 'Text',
id: 'title1',
zIndex: 1,
position: {
@@ -1066,7 +1066,7 @@ const scene2Characters = [
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'title2',
zIndex: 1,
position: {
@@ -1080,7 +1080,7 @@ const scene2Characters = [
}
},
{
- type: 'RichTextComponent',
+ type: 'RichText',
id: 'titlesubtitle',
zIndex: 1,
position: {
@@ -1107,7 +1107,7 @@ const scene2Characters = [
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene2-title2',
zIndex: 1,
position: {
diff --git a/packages/vstory/demo/src/demos/StoryEdit.tsx b/packages/vstory/demo/src/demos/StoryEdit.tsx
index 371bcfac..858f0fbf 100644
--- a/packages/vstory/demo/src/demos/StoryEdit.tsx
+++ b/packages/vstory/demo/src/demos/StoryEdit.tsx
@@ -22,7 +22,7 @@ export const StoryEdit = () => {
const tempSpec: IStorySpec = {
characters: [
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'test-graphics-0',
zIndex: 10,
position: {
@@ -44,7 +44,7 @@ export const StoryEdit = () => {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'test-graphics-1',
zIndex: 0,
position: {
diff --git a/packages/vstory/demo/src/demos/StoryScene.tsx b/packages/vstory/demo/src/demos/StoryScene.tsx
index 8ef071f9..3978f9fc 100644
--- a/packages/vstory/demo/src/demos/StoryScene.tsx
+++ b/packages/vstory/demo/src/demos/StoryScene.tsx
@@ -23,7 +23,7 @@ export const StorySceneDemo = () => {
const tempSpec: IStorySpec = {
roles: [
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'test-graphics-0',
zIndex: 0,
position: {
@@ -45,7 +45,7 @@ export const StorySceneDemo = () => {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'test-graphics-1',
zIndex: 0,
position: {
@@ -116,7 +116,7 @@ export const StorySceneDemo = () => {
}
},
{
- type: 'QipaoComponent',
+ type: 'Qipao',
id: 'test-graphics-2',
zIndex: 3,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene10.tsx b/packages/vstory/demo/src/demos/VChartSite/scene10.tsx
index 5c46bb89..9f0acc44 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene10.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene10.tsx
@@ -80,7 +80,7 @@ const chartSpec = {
export const scene10Characters: ICharacterSpec[] = [
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene10-background`,
zIndex: 0,
position: {
@@ -97,7 +97,7 @@ export const scene10Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene10-person`,
zIndex: 1,
position: {
@@ -113,7 +113,7 @@ export const scene10Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene10-title`,
zIndex: 1,
position: {
@@ -129,7 +129,7 @@ export const scene10Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene10-bg-decoration`,
zIndex: 0,
position: {
@@ -145,7 +145,7 @@ export const scene10Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene10-text-zh`,
zIndex: 0,
position: {
@@ -161,7 +161,7 @@ export const scene10Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene10-text-en`,
zIndex: 0,
position: {
@@ -177,7 +177,7 @@ export const scene10Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene10-chart-image`,
zIndex: 0,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene11.tsx b/packages/vstory/demo/src/demos/VChartSite/scene11.tsx
index daba876d..470aa3c2 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene11.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene11.tsx
@@ -192,7 +192,7 @@ const chartSpec = {
export const scene11Characters: ICharacterSpec[] = [
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene11-background`,
zIndex: 0,
position: {
@@ -209,7 +209,7 @@ export const scene11Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene11-bg-decoration`,
zIndex: 0,
position: {
@@ -225,7 +225,7 @@ export const scene11Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene11-title`,
zIndex: 0,
position: {
@@ -241,7 +241,7 @@ export const scene11Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene11-text-en`,
zIndex: 0,
position: {
@@ -257,7 +257,7 @@ export const scene11Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene11-text-zh`,
zIndex: 0,
position: {
@@ -273,7 +273,7 @@ export const scene11Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene11-chart-image`,
zIndex: 0,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx b/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx
index 4db3cc53..9d3f9e54 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx
@@ -423,7 +423,7 @@ const chartSpec = {
export const scene12_2_Characters: ICharacterSpec[] = [
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene12_2-title`,
zIndex: 0,
position: {
@@ -439,7 +439,7 @@ export const scene12_2_Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene12_2-chart-image`,
zIndex: 1,
position: {
@@ -455,7 +455,7 @@ export const scene12_2_Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene12_2-text-zh`,
zIndex: 0,
position: {
@@ -471,7 +471,7 @@ export const scene12_2_Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene12_2-text-en`,
zIndex: 0,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene12.tsx b/packages/vstory/demo/src/demos/VChartSite/scene12.tsx
index 7a71d4cb..ed69f0a4 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene12.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene12.tsx
@@ -402,7 +402,7 @@ const chartSpec = {
};
export const scene12Characters: ICharacterSpec[] = [
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene12-background`,
zIndex: 0,
position: {
@@ -429,7 +429,7 @@ export const scene12Characters: ICharacterSpec[] = [
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene12-background-bottom`,
zIndex: 0,
position: {
@@ -446,7 +446,7 @@ export const scene12Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene12-title`,
zIndex: 0,
position: {
@@ -462,7 +462,7 @@ export const scene12Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene12-chart-image`,
zIndex: 1,
position: {
@@ -478,7 +478,7 @@ export const scene12Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene12-bg-decoration`,
zIndex: 0,
position: {
@@ -494,7 +494,7 @@ export const scene12Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene12-text-zh`,
zIndex: 0,
position: {
@@ -510,7 +510,7 @@ export const scene12Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene12-text-en`,
zIndex: 0,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene13.tsx b/packages/vstory/demo/src/demos/VChartSite/scene13.tsx
index 1b064e59..800b32b5 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene13.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene13.tsx
@@ -6,7 +6,7 @@ import { easeInOutQuad } from './util';
export const scene13Characters: ICharacterSpec[] = [
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene13-background`,
zIndex: 2,
position: {
@@ -23,7 +23,7 @@ export const scene13Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene13-logo`,
zIndex: 2,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene2.tsx b/packages/vstory/demo/src/demos/VChartSite/scene2.tsx
index 3e26ad47..d6584209 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene2.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene2.tsx
@@ -4,7 +4,7 @@ import { ISceneSpec } from '../../../../src/story/interface';
export const scene2Characters: ICharacterSpec[] = [
{
- type: 'TextComponent',
+ type: 'Text',
id: `title1`,
zIndex: 1,
position: {
@@ -18,7 +18,7 @@ export const scene2Characters: ICharacterSpec[] = [
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: `title2`,
zIndex: 1,
position: {
@@ -32,7 +32,7 @@ export const scene2Characters: ICharacterSpec[] = [
}
},
{
- type: 'RichTextComponent',
+ type: 'RichText',
id: `titlesubtitle`,
zIndex: 1,
position: {
@@ -59,7 +59,7 @@ export const scene2Characters: ICharacterSpec[] = [
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: `scene2-title2`,
zIndex: 1,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene3.tsx b/packages/vstory/demo/src/demos/VChartSite/scene3.tsx
index 040b526e..bc33f737 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene3.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene3.tsx
@@ -15,7 +15,7 @@ import { easeInOutQuad } from './util';
// @ts-ignore
export const scene3Characters: ICharacterSpec[] = [
{
- type: 'TextComponent',
+ type: 'Text',
id: `scene3-title1`,
zIndex: 1,
position: {
@@ -29,7 +29,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: `scene3-line-top`,
zIndex: 1,
position: {
@@ -49,7 +49,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: `scene3-line-bottom`,
zIndex: 1,
position: {
@@ -69,7 +69,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: `scene3-title-Nicole`,
zIndex: 1,
position: {
@@ -83,7 +83,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene3-text-image-top`,
zIndex: 1,
position: {
@@ -99,7 +99,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene3-text-image-top`,
zIndex: 1,
position: {
@@ -115,7 +115,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene3-chart-image-1`,
zIndex: 1,
position: {
@@ -131,7 +131,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene3-chart-image-2`,
zIndex: 1,
position: {
@@ -147,7 +147,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene3-chart-image-3`,
zIndex: 1,
position: {
@@ -163,7 +163,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene3-chart-image-4`,
zIndex: 1,
position: {
@@ -179,7 +179,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene3-chart-image-5`,
zIndex: 1,
position: {
@@ -195,7 +195,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene3-text-image-bottom`,
zIndex: 1,
position: {
@@ -211,7 +211,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: `scene3-title-1486`,
zIndex: 1,
position: {
@@ -225,7 +225,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene3-title-image`,
zIndex: 1,
position: {
@@ -241,7 +241,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene3-background`,
zIndex: 0,
position: {
@@ -258,7 +258,7 @@ export const scene3Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene3-background-decoration`,
zIndex: 0,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene4.tsx b/packages/vstory/demo/src/demos/VChartSite/scene4.tsx
index f8807baa..8f0b5966 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene4.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene4.tsx
@@ -15,7 +15,7 @@ const getCurve = (x: number) => {
};
export const scene4Characters: ICharacterSpec[] = [
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-title-decoration',
zIndex: 1,
position: {
@@ -31,7 +31,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene4-title',
zIndex: 1,
position: {
@@ -50,7 +50,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'scene4-subtitle',
zIndex: 1,
position: {
@@ -69,7 +69,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'scene4-line-left',
zIndex: 1,
position: {
@@ -89,7 +89,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-line-left-decoration',
zIndex: 1,
position: {
@@ -105,7 +105,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-chart-image',
zIndex: 1,
position: {
@@ -208,7 +208,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'scene4-text-zh-line',
zIndex: 1,
position: {
@@ -228,7 +228,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-text-zh-image',
zIndex: 1,
position: {
@@ -244,7 +244,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-text-en-image',
zIndex: 1,
position: {
@@ -260,7 +260,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene4-green-rect',
zIndex: 1,
position: {
@@ -278,7 +278,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-decoration',
zIndex: 1,
position: {
@@ -294,7 +294,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'scene4-grey-rect',
zIndex: 1,
position: {
@@ -311,7 +311,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-bg-decoration',
zIndex: 1,
position: {
@@ -327,7 +327,7 @@ export const scene4Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene4-bg-decoration',
zIndex: 1,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene5.tsx b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx
index fc91f3a8..9c948daf 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene5.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx
@@ -1050,7 +1050,7 @@ const getTransformPointFunc = (offsetX: number, offsetY: number, scaleX: number,
export const scene5Characters: ICharacterSpec[] = [
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene5-background-top`,
zIndex: 0,
position: {
@@ -1067,7 +1067,7 @@ export const scene5Characters: ICharacterSpec[] = [
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene5-background-bottom`,
zIndex: 0,
position: {
@@ -1084,7 +1084,7 @@ export const scene5Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene5-title-image`,
zIndex: 1,
position: {
@@ -1100,7 +1100,7 @@ export const scene5Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene5-background-decoration`,
zIndex: 0,
position: {
@@ -1117,7 +1117,7 @@ export const scene5Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene5-atom`,
zIndex: 0,
position: {
@@ -1133,7 +1133,7 @@ export const scene5Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene5-zh-text`,
zIndex: 0,
position: {
@@ -1149,7 +1149,7 @@ export const scene5Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene5-en-text`,
zIndex: 0,
position: {
@@ -1165,7 +1165,7 @@ export const scene5Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene5-chart-image`,
zIndex: 0,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene6.tsx b/packages/vstory/demo/src/demos/VChartSite/scene6.tsx
index d74b5ae6..dd3b928d 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene6.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene6.tsx
@@ -1651,7 +1651,7 @@ const scene6_2 = [
export const scene6Characters: ICharacterSpec[] = [
// 背景1
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene6-bg1`,
zIndex: 1,
position: {
@@ -1669,7 +1669,7 @@ export const scene6Characters: ICharacterSpec[] = [
},
// 背景2
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene6-bg2`,
zIndex: -1,
position: {
@@ -1687,7 +1687,7 @@ export const scene6Characters: ICharacterSpec[] = [
},
// 底部黑边
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene6-bg-bottom`,
zIndex: 1,
position: {
@@ -1705,7 +1705,7 @@ export const scene6Characters: ICharacterSpec[] = [
},
// 顶部白边
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene6-bg-top`,
zIndex: 0,
position: {
@@ -1724,7 +1724,7 @@ export const scene6Characters: ICharacterSpec[] = [
// 四张图片
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene6-img1`,
zIndex: 1,
position: {
@@ -1740,7 +1740,7 @@ export const scene6Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img2',
zIndex: 1,
position: {
@@ -1756,7 +1756,7 @@ export const scene6Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img3',
zIndex: 1,
position: {
@@ -1772,7 +1772,7 @@ export const scene6Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'scene6-img4',
zIndex: 1,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene7.tsx b/packages/vstory/demo/src/demos/VChartSite/scene7.tsx
index 4133c49c..76d122bf 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene7.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene7.tsx
@@ -42,7 +42,7 @@ const chartSpec = {
// FIXME: 1801 的上中下两块背景都需要从上一页继承下来
export const scene7Characters: ICharacterSpec[] = [
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene7-background-top`,
zIndex: 0,
position: {
@@ -60,7 +60,7 @@ export const scene7Characters: ICharacterSpec[] = [
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene7-background-middle`,
zIndex: 0,
position: {
@@ -77,7 +77,7 @@ export const scene7Characters: ICharacterSpec[] = [
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene7-background-bottom`,
zIndex: 0,
position: {
@@ -95,7 +95,7 @@ export const scene7Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene7-zh-text`,
zIndex: 0,
position: {
@@ -111,7 +111,7 @@ export const scene7Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene7-title`,
zIndex: 0,
position: {
@@ -127,7 +127,7 @@ export const scene7Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene7-chart-image`,
zIndex: 0,
position: {
@@ -143,7 +143,7 @@ export const scene7Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene7-en-text`,
zIndex: 0,
position: {
@@ -159,7 +159,7 @@ export const scene7Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene7-pie-image`,
zIndex: 0,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene8.tsx b/packages/vstory/demo/src/demos/VChartSite/scene8.tsx
index 064dab63..0100b395 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene8.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene8.tsx
@@ -126,7 +126,7 @@ const chartSpec = {
export const scene8Characters: ICharacterSpec[] = [
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene8-background`,
zIndex: 0,
position: {
@@ -143,7 +143,7 @@ export const scene8Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene8-bg-decoration`,
zIndex: 0,
position: {
@@ -159,7 +159,7 @@ export const scene8Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene8-title`,
zIndex: 0,
position: {
@@ -175,7 +175,7 @@ export const scene8Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene8-text`,
zIndex: 0,
position: {
@@ -191,7 +191,7 @@ export const scene8Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene8-chart-image`,
zIndex: 0,
position: {
@@ -207,7 +207,7 @@ export const scene8Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene8-image1`,
zIndex: 0,
position: {
@@ -223,7 +223,7 @@ export const scene8Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene8-image2`,
zIndex: 0,
position: {
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene9.tsx b/packages/vstory/demo/src/demos/VChartSite/scene9.tsx
index ea9d9742..b8692b49 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene9.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene9.tsx
@@ -146,7 +146,7 @@ const chartSpec = {
export const scene9Characters: ICharacterSpec[] = [
{
- type: 'RectComponent',
+ type: 'Rect',
id: `scene9-background`,
zIndex: 0,
position: {
@@ -163,7 +163,7 @@ export const scene9Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene9-bg-decoration`,
zIndex: 0,
position: {
@@ -179,7 +179,7 @@ export const scene9Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene9-person`,
zIndex: 1,
position: {
@@ -195,7 +195,7 @@ export const scene9Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene9-chart-image`,
zIndex: 0,
position: {
@@ -212,7 +212,7 @@ export const scene9Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene9-title`,
zIndex: 0,
position: {
@@ -228,7 +228,7 @@ export const scene9Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene9-text-zh`,
zIndex: 0,
position: {
@@ -244,7 +244,7 @@ export const scene9Characters: ICharacterSpec[] = [
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: `scene9-text-en`,
zIndex: 0,
position: {
diff --git a/packages/vstory/demo/src/demos/graphicAction.tsx b/packages/vstory/demo/src/demos/graphicAction.tsx
index 2d075019..f63408f6 100644
--- a/packages/vstory/demo/src/demos/graphicAction.tsx
+++ b/packages/vstory/demo/src/demos/graphicAction.tsx
@@ -3,7 +3,7 @@ import { IActionsLink, IAction, IStorySpec } from '../../../src/story/interface'
import { Story } from '../../../src/story/story';
import '../../../src/story/index';
import { ICharacterSpec } from '../../../src/story/character';
-import { StoryGraphicType } from '../../../src/dsl/constant';
+import { StoryComponentType } from '../../../src/dsl/constant';
const duration = 1000;
const width = 200;
@@ -91,7 +91,7 @@ export const GraphicActionDemo = () => {
['fade', 'flicker', 'darken'] //
];
effects.forEach((effect, index) => {
- const { character, characterAction } = createCharacterAndAction(StoryGraphicType.RECT, effect, index);
+ const { character, characterAction } = createCharacterAndAction(StoryComponentType.RECT, effect, index);
characters.push(character);
characterActions.push(characterAction);
});
@@ -106,7 +106,7 @@ export const GraphicActionDemo = () => {
['typewriter', 'flicker'] //
];
effects.forEach((effect, index) => {
- const { character, characterAction } = createCharacterAndAction(StoryGraphicType.TEXT, effect, index, col, {
+ const { character, characterAction } = createCharacterAndAction(StoryComponentType.TEXT, effect, index, col, {
graphic: { fontSize: 24, text: effect[0], dx: width / 2, dy: height / 2 },
text: { visible: false }
});
diff --git a/packages/vstory/demo/src/demos/infographics/Pictogram.tsx b/packages/vstory/demo/src/demos/infographics/Pictogram.tsx
index 07add856..a42805ac 100644
--- a/packages/vstory/demo/src/demos/infographics/Pictogram.tsx
+++ b/packages/vstory/demo/src/demos/infographics/Pictogram.tsx
@@ -40,7 +40,7 @@ function createIconMatrix(matrix: number[][], startIndex: number, x: number, y:
const iconIndex = matrix[i][j];
const id = `icon-${startIndex + i * matrix[i].length + j}-${x}-${y}`;
const character: ICharacterSpec = {
- type: 'ShapeComponent',
+ type: 'Shape',
id,
zIndex: 3,
position: {
@@ -89,7 +89,7 @@ export const Pictogram = () => {
const spec: IStorySpec = {
characters: [
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'background-top',
zIndex: 2,
position: {
@@ -106,7 +106,7 @@ export const Pictogram = () => {
}
},
{
- type: 'RectComponent',
+ type: 'Rect',
id: 'background-bottom-filter',
zIndex: 0,
position: {
@@ -124,7 +124,7 @@ export const Pictogram = () => {
}
},
{
- type: 'ImageComponent',
+ type: 'Image',
id: 'background-bottom',
zIndex: 1,
position: {
@@ -141,7 +141,7 @@ export const Pictogram = () => {
}
},
{
- type: 'RichTextComponent',
+ type: 'RichText',
id: 'Title',
zIndex: 3,
position: {
@@ -175,7 +175,7 @@ export const Pictogram = () => {
}
},
{
- type: 'LineComponent',
+ type: 'Line',
id: 'SplitLine',
zIndex: 3,
position: {
@@ -196,7 +196,7 @@ export const Pictogram = () => {
}
},
{
- type: 'ShapeComponent',
+ type: 'Shape',
id: 'Star',
zIndex: 3,
position: {
@@ -218,7 +218,7 @@ export const Pictogram = () => {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'LeftPercent',
zIndex: 3,
position: {
@@ -239,7 +239,7 @@ export const Pictogram = () => {
}
},
{
- type: 'RichTextComponent',
+ type: 'RichText',
id: 'LeftDescription',
zIndex: 3,
position: {
@@ -264,7 +264,7 @@ export const Pictogram = () => {
}
},
{
- type: 'TextComponent',
+ type: 'Text',
id: 'RightPercent',
zIndex: 3,
position: {
@@ -285,7 +285,7 @@ export const Pictogram = () => {
}
},
{
- type: 'RichTextComponent',
+ type: 'RichText',
id: 'RightDescription',
zIndex: 3,
position: {
diff --git a/packages/vstory/package.json b/packages/vstory/package.json
index d0625f66..f44b1c9e 100644
--- a/packages/vstory/package.json
+++ b/packages/vstory/package.json
@@ -25,10 +25,10 @@
},
"dependencies": {
"@visactor/vchart": "1.11.5",
- "@visactor/vrender": "0.19.20-alpha.2",
- "@visactor/vrender-core": "0.19.20-alpha.2",
- "@visactor/vrender-kits": "0.19.20-alpha.2",
- "@visactor/vrender-components": "0.19.20-alpha.2",
+ "@visactor/vrender": "0.19.20-alpha.3",
+ "@visactor/vrender-core": "0.19.20-alpha.3",
+ "@visactor/vrender-kits": "0.19.20-alpha.3",
+ "@visactor/vrender-components": "0.19.20-alpha.3",
"@visactor/vutils": "~0.18.4"
},
"devDependencies": {
diff --git a/packages/vstory/src/animate/wipeIn.ts b/packages/vstory/src/animate/wipeIn.ts
index 050f14b4..011369a9 100644
--- a/packages/vstory/src/animate/wipeIn.ts
+++ b/packages/vstory/src/animate/wipeIn.ts
@@ -1,183 +1,87 @@
-import { ACustomAnimate } from '@visactor/vrender';
-import type { EasingType, ILinearGradient } from '@visactor/vrender';
+// import { ACustomAnimate } from '@visactor/vrender';
+// import type { EasingType, ILinearGradient } from '@visactor/vrender';
-export enum Direction {
- LEFT_TO_RIGHT = 0,
- RIGHT_TO_LEFT = 1,
- TOP_TO_BOTTOM = 2,
- BOTTOM_TO_TOP = 3,
- STROKE = 4
-}
+// export enum Direction {
+// LEFT_TO_RIGHT = 0,
+// RIGHT_TO_LEFT = 1,
+// TOP_TO_BOTTOM = 2,
+// BOTTOM_TO_TOP = 3
+// }
-export class Wipe extends ACustomAnimate {
- declare direction: number;
- declare toFill: string;
- declare toStroke: string;
- declare fillGradient: ILinearGradient;
- declare strokeGradient: ILinearGradient;
- declare fill: boolean;
- declare stroke: boolean;
- constructor(
- from: any,
- to: any,
- duration: number,
- easing: EasingType,
- params?: { direction?: number; fill?: boolean; stroke?: boolean }
- ) {
- super(from, to, duration, easing, params);
- const { direction = Direction.LEFT_TO_RIGHT, fill = true, stroke = true } = params || {};
- this.direction = direction;
- this.fill = fill;
- this.stroke = stroke;
- this.fillGradient = {
- gradient: 'linear',
- stops: []
- };
- this.strokeGradient = {
- gradient: 'linear',
- stops: []
- };
- }
+// export class Wipe extends ACustomAnimate {
+// declare direction: number;
- getEndProps(): Record {
- return {
- fill: this.toFill,
- stroke: this.toStroke
- };
- }
+// constructor(
+// from: any,
+// to: any,
+// duration: number,
+// easing: EasingType,
+// params?: { direction?: number; fill?: boolean; stroke?: boolean }
+// ) {
+// super(from, to, duration, easing, params);
+// const { direction = Direction.LEFT_TO_RIGHT, fill = true, stroke = true } = params || {};
+// this.direction = direction;
- onBind(): void {
- this.toFill = this.target.getComputedAttribute('fill');
- this.toStroke = this.target.getComputedAttribute('stroke');
- }
+// }
- onEnd(): void {
- return;
- }
+// getEndProps(): Record {
+// return {
+// };
+// }
- onUpdate(end: boolean, ratio: number, out: Record): void {
- if (!this.toFill) {
- return;
- }
- if (!this.toStroke) {
- return;
- }
- switch (this.direction) {
- case Direction.RIGHT_TO_LEFT:
- this.rightToLeft(end, ratio, out);
- break;
- case Direction.TOP_TO_BOTTOM:
- this.topToBottom(end, ratio, out);
- break;
- case Direction.BOTTOM_TO_TOP:
- this.bottomToTop(end, ratio, out);
- break;
- case Direction.STROKE:
- this.strokePath(end, ratio, out);
- break;
- default:
- this.leftToRight(end, ratio, out);
- break;
- }
+// onBind(): void {
- if (end) {
- out.fill = this.toFill;
- out.stroke = this.toStroke;
- } else {
- if (this.fill) {
- const toFillColor = this.toFill;
- this.fillGradient.stops = [
- { offset: 0, color: toFillColor },
- { offset: ratio, color: toFillColor },
- { offset: Math.min(1, ratio * 2), color: 'white' }
- ];
- out.fill = this.fillGradient;
- }
+// }
- if (this.stroke) {
- const toStrokeColor = this.toStroke;
- this.strokeGradient.stops = [
- { offset: 0, color: toStrokeColor },
- { offset: ratio, color: toStrokeColor },
- { offset: Math.min(1, ratio * 2), color: 'white' }
- ];
- out.stroke = this.strokeGradient;
- }
- }
- }
+// onEnd(): void {
+// return;
+// }
- leftToRight(end: boolean, ratio: number, out: Record) {
- if (this.fill) {
- this.fillGradient.x0 = 0;
- this.fillGradient.y0 = 0;
- this.fillGradient.x1 = 1;
- this.fillGradient.y1 = 0;
- }
- if (this.stroke) {
- this.strokeGradient.x0 = 0;
- this.strokeGradient.y0 = 0;
- this.strokeGradient.x1 = 1;
- this.strokeGradient.y1 = 0;
- }
- }
+// onUpdate(end: boolean, ratio: number, out: Record): void {
+// console.log('onUpdate');
- strokePath(end: boolean, ratio: number, out: Record) {
- if (this.fill) {
- this.fillGradient.x0 = 0;
- this.fillGradient.y0 = 0;
- this.fillGradient.x1 = 1;
- this.fillGradient.y1 = 0;
- }
- if (this.stroke) {
- const dashLen = 300;
- const offset = ratio * dashLen;
- out.lineDash = [offset, dashLen - offset];
- }
- return;
- }
+// switch (this.direction) {
+// case Direction.RIGHT_TO_LEFT:
+// this.rightToLeft(end, ratio, out);
+// break;
+// case Direction.TOP_TO_BOTTOM:
+// this.topToBottom(end, ratio, out);
+// break;
+// case Direction.BOTTOM_TO_TOP:
+// this.bottomToTop(end, ratio, out);
+// break;
+// case Direction.STROKE:
+// this.strokePath(end, ratio, out);
+// break;
+// default:
+// this.leftToRight(end, ratio, out);
+// break;
+// }
- rightToLeft(end: boolean, ratio: number, out: Record) {
- if (this.fill) {
- this.fillGradient.x0 = 1;
- this.fillGradient.y0 = 0;
- this.fillGradient.x1 = 0;
- this.fillGradient.y1 = 0;
- }
- if (this.stroke) {
- this.strokeGradient.x0 = 1;
- this.strokeGradient.y0 = 0;
- this.strokeGradient.x1 = 0;
- this.strokeGradient.y1 = 0;
- }
- }
+// if (end) {
+// out.fill = this.toFill;
+// out.stroke = this.toStroke;
+// } else {
+// if (this.fill && this.toFill) {
+// const toFillColor = this.toFill;
+// this.fillGradient.stops = [
+// { offset: 0, color: toFillColor },
+// { offset: ratio, color: toFillColor },
+// { offset: Math.min(1, ratio * 2), color: 'white' }
+// ];
+// out.fill = this.fillGradient;
+// }
- topToBottom(end: boolean, ratio: number, out: Record) {
- if (this.fill) {
- this.fillGradient.x0 = 0;
- this.fillGradient.y0 = 0;
- this.fillGradient.x1 = 0;
- this.fillGradient.y1 = 1;
- }
- if (this.stroke) {
- this.strokeGradient.x0 = 0;
- this.strokeGradient.y0 = 0;
- this.strokeGradient.x1 = 0;
- this.strokeGradient.y1 = 1;
- }
- }
+// if (this.stroke && this.toStroke) {
+// const toStrokeColor = this.toStroke;
+// this.strokeGradient.stops = [
+// { offset: 0, color: toStrokeColor },
+// { offset: ratio, color: toStrokeColor },
+// { offset: Math.min(1, ratio * 2), color: 'white' }
+// ];
+// out.stroke = this.strokeGradient;
+// }
+// }
+// }
- bottomToTop(end: boolean, ratio: number, out: Record) {
- if (this.fill) {
- this.fillGradient.x0 = 0;
- this.fillGradient.y0 = 1;
- this.fillGradient.x1 = 0;
- this.fillGradient.y1 = 0;
- }
- if (this.stroke) {
- this.strokeGradient.x0 = 0;
- this.strokeGradient.y0 = 1;
- this.strokeGradient.x1 = 0;
- this.strokeGradient.y1 = 0;
- }
- }
-}
+// }
diff --git a/packages/vstory/src/constants/character.ts b/packages/vstory/src/constants/character.ts
index f4015003..14eac449 100644
--- a/packages/vstory/src/constants/character.ts
+++ b/packages/vstory/src/constants/character.ts
@@ -2,17 +2,18 @@ export const enum StoryChartType {
VCHART = 'VChart'
}
-export enum StoryGraphicType {
- RECT = 'RectComponent',
- SHAPE = 'ShapeComponent',
- LINE = 'LineComponent',
- ARC = 'ArcComponent',
+export enum StoryComponentType {
+ RECT = 'Rect',
+ SHAPE = 'Shape',
+ LINE = 'Line',
+ ARC = 'Arc',
// AREA = 'AreaComponent',
- PATH = 'PathComponent',
- TEXT = 'TextComponent',
- RICH_TEXT = 'RichTextComponent',
- QIPAO = 'QipaoComponent',
- IMAGE = 'ImageComponent'
+ PATH = 'Path',
+ TEXT = 'Text',
+ RICH_TEXT = 'RichText',
+ QIPAO = 'Qipao',
+ IMAGE = 'Image',
+ TIMELINE = 'TIMELINE'
}
export const enum StoryChartComponentType {
diff --git a/packages/vstory/src/constants/config.ts b/packages/vstory/src/constants/config.ts
new file mode 100644
index 00000000..2a40cee4
--- /dev/null
+++ b/packages/vstory/src/constants/config.ts
@@ -0,0 +1,6 @@
+export enum Direction {
+ LEFT_TO_RIGHT = 0,
+ RIGHT_TO_LEFT = 1,
+ TOP_TO_BOTTOM = 2,
+ BOTTOM_TO_TOP = 3
+}
diff --git a/packages/vstory/src/dsl/constant/index.ts b/packages/vstory/src/dsl/constant/index.ts
index 5ec7902f..5802dcbf 100644
--- a/packages/vstory/src/dsl/constant/index.ts
+++ b/packages/vstory/src/dsl/constant/index.ts
@@ -14,17 +14,18 @@ export const enum StoryChartType {
// SUNBURST = 'SunburstChart',
VCHART = 'VChart'
}
-export enum StoryGraphicType {
- RECT = 'RectComponent',
- SHAPE = 'ShapeComponent',
- LINE = 'LineComponent',
- ARC = 'ArcComponent',
+export enum StoryComponentType {
+ RECT = 'Rect',
+ SHAPE = 'Shape',
+ LINE = 'Line',
+ ARC = 'Arc',
// AREA = 'AreaComponent',
- PATH = 'PathComponent',
- TEXT = 'TextComponent',
- RICH_TEXT = 'RichTextComponent',
- QIPAO = 'QipaoComponent',
- IMAGE = 'ImageComponent'
+ PATH = 'Path',
+ TEXT = 'Text',
+ RICH_TEXT = 'RichText',
+ QIPAO = 'Qipao',
+ IMAGE = 'Image',
+ TIMELINE = 'Timeline'
}
export const enum StoryChartComponentType {
diff --git a/packages/vstory/src/dsl/story-processor/processorMap/processorMap.ts b/packages/vstory/src/dsl/story-processor/processorMap/processorMap.ts
index 3073b273..eed7cf2c 100644
--- a/packages/vstory/src/dsl/story-processor/processorMap/processorMap.ts
+++ b/packages/vstory/src/dsl/story-processor/processorMap/processorMap.ts
@@ -1,4 +1,4 @@
-import { StoryChartComponentType, StoryChartType, StoryGraphicType } from '../../constant';
+import { StoryChartComponentType, StoryChartType, StoryComponentType } from '../../constant';
import { addProcessor } from '../vchart/add';
import { createMarkStyleProcessorByMarkType } from '../vchart/style/style';
@@ -128,7 +128,7 @@ export const commonMarkProcessor = {
};
export const processorMarkMap: Record = {};
-Object.values(StoryGraphicType).forEach(type => {
+Object.values(StoryComponentType).forEach(type => {
processorMarkMap[type] = commonMarkProcessor;
});
diff --git a/packages/vstory/src/dsl/story-processor/processorMap/rose.ts b/packages/vstory/src/dsl/story-processor/processorMap/rose.ts
index 36ad059c..bc0ea0a1 100644
--- a/packages/vstory/src/dsl/story-processor/processorMap/rose.ts
+++ b/packages/vstory/src/dsl/story-processor/processorMap/rose.ts
@@ -1,4 +1,4 @@
-import { StoryChartComponentType, StoryChartType, StoryGraphicType } from '../../constant';
+import { StoryChartComponentType, StoryChartType, StoryComponentType } from '../../constant';
import { addProcessor } from '../vchart/add';
import { createMarkStyleProcessorByMarkType } from '../vchart/style/style';
diff --git a/packages/vstory/src/player/interface/scheduler.ts b/packages/vstory/src/player/interface/scheduler.ts
index 81bd401a..b4f570f0 100644
--- a/packages/vstory/src/player/interface/scheduler.ts
+++ b/packages/vstory/src/player/interface/scheduler.ts
@@ -4,4 +4,6 @@ import type { IActionItem } from '../scheduler';
export interface IScheduler {
initActs: (acts: IActSpec[]) => void;
getActionsInRange: (fromTime: number, toTime: number) => IActionItem[];
+ clearState: () => void;
+ getTotalTime: () => number;
}
diff --git a/packages/vstory/src/player/player.ts b/packages/vstory/src/player/player.ts
index 724effc4..9bb3f37c 100644
--- a/packages/vstory/src/player/player.ts
+++ b/packages/vstory/src/player/player.ts
@@ -56,16 +56,27 @@ export class Player implements IPlayer {
// 清除当前状态，一般用于回放操作
reset() {
+ this._scheduler.clearState();
+ this._story.canvas.getStage().getTimeline().clear();
return;
}
tickTo(t: number) {
// console.log(t);
const lastTime = this._currTime;
+ const totalTime = this._scheduler.getTotalTime();
+ while (t > totalTime) {
+ t -= totalTime;
+ }
if (lastTime > t) {
- this.reset();
- this._currTime = 0;
- this.tickTo(0);
+ // 先结束这一块内容，设置到totalTime，让动画结束
+ if (lastTime < totalTime) {
+ t = totalTime + 0.01;
+ } else {
+ this.reset();
+ this._currTime = 0;
+ this.tickTo(0);
+ }
}
const actions = this._scheduler.getActionsInRange(lastTime, t);
diff --git a/packages/vstory/src/player/processor/component/common-component.ts b/packages/vstory/src/player/processor/component/common-component.ts
new file mode 100644
index 00000000..79ddcbf9
--- /dev/null
+++ b/packages/vstory/src/player/processor/component/common-component.ts
@@ -0,0 +1,156 @@
+import type { IComponent, ISeries, IVChart } from '@visactor/vchart';
+import { isObject, isString, merge } from '@visactor/vutils';
+import type { ICharacter } from '../../../story/character';
+import type { IAction } from '../../../story/interface';
+import { ActionProcessorItem } from '../processor-item';
+import type { EasingType, IGraphic } from '@visactor/vrender-core';
+import type { IFadeInParams, IScaleInParams, IWipeInParams } from '../interface/appear-action';
+import { canDoGraphicAnimation } from './utils';
+// import { Wipe } from '../../../animate/wipeIn';
+
+// export const appearEffectMap = {
+// fade: fadeIn,
+// scale: scaleIn,
+// // move: moveIn,
+// wipe: wipeIn
+// };
+
+function fadeIn(character: ICharacter, animation: IFadeInParams, effect: string) {
+ const graphics = getCharacterByEffect(character, effect) as IGraphic[];
+ graphics.forEach(graphic => _fadeIn(graphic, animation as any));
+}
+
+function _fadeIn(graphic: IGraphic, params: IFadeInParams): boolean {
+ if (!canDoGraphicAnimation(graphic, params)) {
+ return false;
+ }
+ const { fade = {} } = params;
+ const opacity = fade.opacity ?? params.opacity ?? 1;
+ const duration = fade.duration ?? params.duration;
+ const easing = fade.easing ?? params.easing;
+ const isBaseOpacity = fade.isBaseOpacity ?? false;
+ const opacityKey = isBaseOpacity ? 'baseOpacity' : 'opacity';
+
+ graphic.setAttributes({
+ [opacityKey]: 0
+ });
+
+ graphic.animate().to({ [opacityKey]: opacity }, duration, easing as EasingType);
+
+ return true;
+}
+
+function scaleIn(character: ICharacter, animation: IFadeInParams, effect: string) {
+ const graphics = getCharacterByEffect(character, effect) as IGraphic[];
+ graphics.forEach(graphic => _scaleIn(graphic, animation as any));
+}
+
+function _scaleIn(graphic: IGraphic, params: IScaleInParams): boolean {
+ if (!canDoGraphicAnimation(graphic, params)) {
+ return false;
+ }
+ const { scale = {} } = params;
+ const ratio = scale.ratio ?? params.ratio ?? 1;
+ const duration = scale.duration ?? params.duration;
+ const easing = scale.easing ?? params.easing;
+
+ graphic.setAttributes({
+ scaleX: 0,
+ scaleY: 0
+ });
+ graphic.animate().to({ scaleX: ratio, scaleY: ratio }, duration, easing as EasingType);
+
+ return true;
+}
+
+const Direction: any = {
+ right: 0,
+ left: 1,
+ top: 2,
+ bottom: 3
+};
+
+function wipeIn(character: ICharacter, animation: IFadeInParams, effect: string) {
+ const graphic = getCharacterParentGraphic(character);
+ _wipeIn(graphic, animation as any);
+}
+function _wipeIn(graphic: IGraphic, params: IWipeInParams) {
+ if (!canDoGraphicAnimation(graphic, params)) {
+ return false;
+ }
+
+ const { wipe = {} } = params;
+ const from = wipe.from ?? params.from ?? 'right';
+ const duration = wipe.duration ?? params.duration;
+ const easing = wipe.easing ?? params.easing;
+
+ graphic.setAttributes({
+ wipeDirection: Direction[from],
+ wipeRatio: 0
+ } as any);
+ graphic
+ .animate()
+ .to({ wipeRatio: 1 }, duration, easing)
+ .onEnd(() => {
+ graphic.setAttributes({ wipeRatio: 1 } as any);
+ });
+ return true;
+}
+
+export class CommonAppearActionProcessor extends ActionProcessorItem {
+ name: 'appear';
+
+ constructor() {
+ super();
+ }
+
+ getStartTimeAndDuration(action: IAction): { startTime: number; duration: number } {
+ const { startTime: globalStartTime = 0, duration: globalDuration } = action;
+ const { startTime = 0, duration = 0 } = action.payload?.animation ?? ({} as any);
+
+ const st = globalStartTime + startTime;
+ const d = globalDuration ?? duration;
+ return {
+ startTime: st,
+ duration: d
+ };
+ }
+
+ run(character: ICharacter, actionSpec: IAction): void {
+ const { animation } = actionSpec.payload ?? {};
+ const { effect = 'fadeIn' } = animation ?? ({} as any);
+
+ let effectFunc = fadeIn;
+ switch (effect) {
+ case 'scaleIn':
+ effectFunc = scaleIn;
+ break;
+ case 'wipeIn':
+ effectFunc = wipeIn;
+ break;
+ }
+ effectFunc(character, animation as any, effect);
+ // 获取相关图形
+ // const graphics = this.getCharacterByEffect(character, effect);
+ // 执行appearEffect
+ // graphics.forEach(graphic => effectFunc(graphic, animation as any));
+ }
+}
+
+function getCharacterParentGraphic(character: ICharacter) {
+ return character.getGraphicParent();
+}
+
+function getCharacterGraphic(character: ICharacter) {
+ return character.getGraphicParent().getChildren() as IGraphic[];
+}
+
+function getCharacterByEffect(character: ICharacter, effect: 'move' | string) {
+ // 图表仅操作父节点.
+ // @ts-ignore
+ if (character._graphic.type === 'chart') {
+ return [getCharacterParentGraphic(character)];
+ }
+ // move效果, 一定是对parent的操作
+ return effect === 'move' ? [getCharacterParentGraphic(character)] : getCharacterGraphic(character);
+}
diff --git a/packages/vstory/src/player/processor/component/line/line-appear.ts b/packages/vstory/src/player/processor/component/line/line-appear.ts
new file mode 100644
index 00000000..44dc6474
--- /dev/null
+++ b/packages/vstory/src/player/processor/component/line/line-appear.ts
@@ -0,0 +1,8 @@
+import { CommonAppearActionProcessor } from '../common-component';
+
+export class LineAppearActionProcessor extends CommonAppearActionProcessor {
+ name: 'appear';
+ constructor() {
+ super();
+ }
+}
diff --git a/packages/vstory/src/player/processor/component/rect/rect-appear.ts b/packages/vstory/src/player/processor/component/rect/rect-appear.ts
new file mode 100644
index 00000000..90041b0d
--- /dev/null
+++ b/packages/vstory/src/player/processor/component/rect/rect-appear.ts
@@ -0,0 +1,8 @@
+import { CommonAppearActionProcessor } from '../common-component';
+
+export class RectAppearActionProcessor extends CommonAppearActionProcessor {
+ name: 'appear';
+ constructor() {
+ super();
+ }
+}
diff --git a/packages/vstory/src/player/processor/component/utils.ts b/packages/vstory/src/player/processor/component/utils.ts
new file mode 100644
index 00000000..9ee4504a
--- /dev/null
+++ b/packages/vstory/src/player/processor/component/utils.ts
@@ -0,0 +1,12 @@
+import type { IGraphic } from '@visactor/vrender-core';
+import type { IAnimationParams } from '../interface/appear-action';
+
+/**
+ * 判断图元是否需要执行动画
+ * @param graphic
+ * @param animationParams
+ * @returns
+ */
+export const canDoGraphicAnimation = (graphic: IGraphic, animationParams: IAnimationParams) => {
+ return graphic && animationParams.duration && animationParams.duration > 0;
+};
diff --git a/packages/vstory/src/player/processor/interface/appear-action.ts b/packages/vstory/src/player/processor/interface/appear-action.ts
index c756a1f0..550e2faf 100644
--- a/packages/vstory/src/player/processor/interface/appear-action.ts
+++ b/packages/vstory/src/player/processor/interface/appear-action.ts
@@ -33,4 +33,50 @@ export interface IChartAppearAction extends IAction {
payload: IChartAppearPayLoad;
}
+// components
+export interface IFadeInParams extends IAnimationParams {
+ opacity?: number;
+ fade?: {
+ /**
+ * @default 1
+ */
+ opacity?: number;
+ duration?: number;
+ easing?: EasingType;
+ /**
+ * 作用于全局的透明度
+ * @default false
+ */
+ isBaseOpacity?: string;
+ };
+}
+
+export interface IScaleInParams extends IAnimationParams {
+ ratio?: number;
+ scale?: {
+ /**
+ * @default 1
+ */
+ ratio?: number;
+ duration?: number;
+ easing?: EasingType;
+ };
+}
+
+export interface IWipeInParams extends IAnimationParams {
+ from?: 'left' | 'right' | 'top' | 'bottom' | 'stroke';
+ wipe?: {
+ /**
+ * @default left
+ */
+ from?: 'left' | 'right' | 'top' | 'bottom' | 'stroke';
+ duration?: number;
+ easing?: EasingType;
+ };
+}
+
+export interface IComponentAppearPayLoad extends IActionPayload {
+ animation: IFadeInParams | IScaleInParams | IWipeInParams;
+}
+
export type AppearOption = Omit;
diff --git a/packages/vstory/src/player/processor/processor.ts b/packages/vstory/src/player/processor/processor.ts
index c0aace5d..74c931bb 100644
--- a/packages/vstory/src/player/processor/processor.ts
+++ b/packages/vstory/src/player/processor/processor.ts
@@ -58,6 +58,9 @@ export class ActionProcessor implements IActionProcessor {
const processor = this.getProcessor(character.spec.type, action.action);
+ if (!processor) {
+ logger('error', `获取processor失败，请检查 ${character.spec.type} 是否支持 ${action.action}`);
+ }
return processor.getStartTimeAndDuration(action);
// characterActions.forEach(action => {
diff --git a/packages/vstory/src/player/processor/processorMap.ts b/packages/vstory/src/player/processor/processorMap.ts
index d72822f6..aa5b0156 100644
--- a/packages/vstory/src/player/processor/processorMap.ts
+++ b/packages/vstory/src/player/processor/processorMap.ts
@@ -1,6 +1,8 @@
import { ACTION_TYPE } from '../../constants/action';
-import { StoryChartType } from '../../constants/character';
+import { StoryChartType, StoryComponentType } from '../../constants/character';
import { VChartAppearActionProcessor } from './chart/vchart';
+import { LineAppearActionProcessor } from './component/line/line-appear';
+import { RectAppearActionProcessor } from './component/rect/rect-appear';
export const processorChartMap = {
[StoryChartType.VCHART]: {
@@ -8,6 +10,16 @@ export const processorChartMap = {
}
};
+export const processorComponentMap = {
+ [StoryComponentType.RECT]: {
+ [ACTION_TYPE.APPEAR]: new RectAppearActionProcessor()
+ },
+ [StoryComponentType.LINE]: {
+ [ACTION_TYPE.APPEAR]: new LineAppearActionProcessor()
+ }
+};
+
export const processorMap = {
- ...processorChartMap
+ ...processorChartMap,
+ ...processorComponentMap
};
diff --git a/packages/vstory/src/player/scheduler.ts b/packages/vstory/src/player/scheduler.ts
index a5f19192..cf5887f4 100644
--- a/packages/vstory/src/player/scheduler.ts
+++ b/packages/vstory/src/player/scheduler.ts
@@ -41,37 +41,30 @@ class ActionItem implements IActionItem {
export class Scheduler implements IScheduler {
protected _actionProcessor: IActionProcessor;
protected _actsInfo: IActInfo[];
+ protected _runnedAct: Set;
constructor(actionProcessor: IActionProcessor) {
this._actionProcessor = actionProcessor;
+ this._runnedAct = new Set();
}
- // static formatTimeInAction(time: number, action: IActInfo): number {
- // const { duration } = action;
- // if (time < startTime) {
- // return time;
- // }
- // if (startTime + duration <= 0) {
- // return time;
- // }
- // while (time > startTime + duration) {
- // time -= startTime + duration;
- // }
- // return time;
- // }
+ clearState(): void {
+ this._runnedAct.clear();
+ }
+
+ getTotalTime(): number {
+ return this._actsInfo.reduce((t, actInfo) => Math.max(t, actInfo.startTime + actInfo.duration), 0);
+ }
findActByTime(t: number) {
// 规范化t
- const totalTime = this._actsInfo.reduce((t, actInfo) => Math.max(t, actInfo.startTime + actInfo.duration), 0);
+ const totalTime = this.getTotalTime();
if (totalTime <= 0) {
return {
actInfo: this._actsInfo[0],
t: 0
};
}
- while (t > totalTime) {
- t -= totalTime;
- }
for (let i = 0; i < this._actsInfo.length; i++) {
const actInfo = this._actsInfo[i];
if (actInfo.startTime <= t && actInfo.startTime + actInfo.duration > t) {
@@ -108,12 +101,14 @@ export class Scheduler implements IScheduler {
const { startTime: sceneStartTime } = sceneInfo;
sceneInfo.actionList.forEach(actionInfo => {
const startTime = sceneStartTime + actionInfo.startTime;
- if (startTime >= formatFromTime && startTime < formatToTime) {
- actions.push(actionInfo);
+ if (startTime < formatToTime) {
+ if (!this._runnedAct.has(actionInfo)) {
+ this._runnedAct.add(actionInfo);
+ actions.push(actionInfo);
+ }
}
});
});
-
return actions;
}
diff --git a/packages/vstory/src/story/character-tree/character-tree.ts b/packages/vstory/src/story/character-tree/character-tree.ts
index 4ea8bf73..1a279025 100644
--- a/packages/vstory/src/story/character-tree/character-tree.ts
+++ b/packages/vstory/src/story/character-tree/character-tree.ts
@@ -45,7 +45,7 @@ export class CharacterTree implements ICharacterTree {
if (!this._characters[(spec).id]) {
this._characters[(spec).id] = StoryFactory.createCharacter(spec, option);
}
- return this._characters[(spec).id];
+ // return this._characters[(spec).id];
}
});
}
diff --git a/packages/vstory/src/story/character/component/character-group/component-group-graphic-picker.ts b/packages/vstory/src/story/character/component/character-group/component-group-graphic-picker.ts
new file mode 100644
index 00000000..70d21a66
--- /dev/null
+++ b/packages/vstory/src/story/character/component/character-group/component-group-graphic-picker.ts
@@ -0,0 +1,36 @@
+// import type { IPoint } from '@visactor/vutils';
+// import { inject, injectable, getTheme, CircleRender, getScaledStroke, CIRCLE_NUMBER_TYPE } from '@visactor/vrender';
+// import type {
+// IGraphicAttribute,
+// ICircle,
+// IContext2d,
+// IMarkAttribute,
+// IThemeAttribute,
+// IGraphicPicker,
+// IGraphicRender,
+// IPickParams
+// } from '@visactor/vrender';
+// import { CHART_NUMBER_TYPE } from './component-group-graphic';
+
+// @injectable()
+// export class VChartPicker extends DefaultCanvasGroupPicker implements IGraphicPicker {
+// type = 'vstory-component-group';
+// numberType: number = CHART_NUMBER_TYPE;
+
+// contains(chart: any, point: any, params?: IPickParams): boolean | any {
+// const vChart = (chart as Chart).vchart;
+// const chartStage = vChart.getStage();
+// // @ts-ignore
+// chartStage._editor_needRender = true;
+// const matrix = chart.globalTransMatrix.clone();
+// const stageMatrix = chart.stage.window.getViewBoxTransform();
+// matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f);
+// chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+// chartStage.dirtyBounds?.clear();
+// const nextP = { x: 0, y: 0 };
+// matrix.transformPoint(point, nextP);
+// const graphic = chartStage.pick(nextP.x, nextP.y);
+
+// return graphic;
+// }
+// }
diff --git a/packages/vstory/src/story/character/component/character-group/component-group-graphic-render.ts b/packages/vstory/src/story/character/component/character-group/component-group-graphic-render.ts
new file mode 100644
index 00000000..6b52dae6
--- /dev/null
+++ b/packages/vstory/src/story/character/component/character-group/component-group-graphic-render.ts
@@ -0,0 +1,70 @@
+import type {
+ IContext2d,
+ IDrawContext,
+ IGraphicAttribute,
+ IGraphicRender,
+ IGraphicRenderDrawParams,
+ IMarkAttribute,
+ IRenderService,
+ IThemeAttribute,
+ IGraphic,
+ IGroup
+} from '@visactor/vrender';
+import { injectable, DefaultCanvasGroupRender } from '@visactor/vrender';
+import { CHART_NUMBER_TYPE } from './component-group-graphic';
+import { Direction } from '../../../../constants/config';
+
+export const ChartRender = Symbol.for('ChartRender');
+export const ChartRenderContribution = Symbol.for('ChartRenderContribution');
+
+@injectable()
+export class ComponentGroupRender extends DefaultCanvasGroupRender implements IGraphicRender {
+ type: any = 'vstory-component-group';
+ numberType: number = CHART_NUMBER_TYPE;
+
+ draw(group: IGroup, renderService: IRenderService, drawContext: IDrawContext, params?: IGraphicRenderDrawParams) {
+ const { context } = drawContext;
+ if (!context) {
+ return;
+ }
+ const { wipeDirection, wipeRatio, wipeColor, wipeBlur } = group.attribute as any;
+ const drawWipe = isFinite(wipeRatio);
+ let x1;
+ let y1;
+ let x2;
+ let y2;
+ if (drawWipe) {
+ const b = group.AABBBounds;
+ if (wipeDirection === Direction.LEFT_TO_RIGHT) {
+ x1 = b.x1;
+ y1 = b.y1;
+ x2 = x1 + b.width() * wipeRatio;
+ y2 = b.height() + y1;
+ } else if (wipeDirection === Direction.RIGHT_TO_LEFT) {
+ x2 = b.x1;
+ y1 = b.y1;
+ x1 = x2 - b.width() * wipeRatio;
+ y2 = b.height() + y1;
+ } else if (wipeDirection === Direction.TOP_TO_BOTTOM) {
+ x1 = b.x1;
+ y1 = b.y1;
+ x2 = x1 + b.width();
+ y2 = b.height() * wipeRatio + y1;
+ } else if (wipeDirection === Direction.BOTTOM_TO_TOP) {
+ x1 = b.x1;
+ y2 = b.y1;
+ x2 = x1 + b.width();
+ y1 = y2 - b.height() * wipeRatio;
+ }
+ context.save();
+ context.setTransformForCurrent();
+ context.beginPath();
+ context.rect(x1, y1, x2 - x1, y2 - y1);
+ context.clip();
+ }
+ super.draw(group, renderService, drawContext, params);
+ if (drawWipe) {
+ context.restore();
+ }
+ }
+}
diff --git a/packages/vstory/src/story/character/component/character-group/component-group-graphic.ts b/packages/vstory/src/story/character/component/character-group/component-group-graphic.ts
new file mode 100644
index 00000000..b9c214db
--- /dev/null
+++ b/packages/vstory/src/story/character/component/character-group/component-group-graphic.ts
@@ -0,0 +1,31 @@
+import type { IVisactorGraphic } from '../../visactor/interface';
+import type { IBoundsLike } from '@visactor/vutils';
+import type { ISpec, IVChart } from '@visactor/vchart';
+import type { GraphicType, IGroupGraphicAttribute, ITicker } from '@visactor/vrender';
+import { genNumberType, Group } from '@visactor/vrender';
+
+export interface IChartGraphicAttribute extends IGroupGraphicAttribute {
+ renderCanvas: HTMLCanvasElement;
+ spec: any;
+ ClassType: any;
+ vchart: IVChart;
+ mode: string;
+ modeParams?: any;
+ dpr: number;
+ interactive: boolean;
+ animation: boolean;
+ disableTriggerEvent: boolean;
+ disableDirtyBounds: boolean;
+ viewBox: IBoundsLike;
+ ticker?: ITicker;
+ autoRender?: boolean;
+ chartInitOptions?: any;
+}
+
+export const CHART_NUMBER_TYPE = genNumberType();
+
+// @ts-ignore
+export class ComponentGroup extends Group implements IVisactorGraphic {
+ type: GraphicType = 'vstory-component-group' as any;
+ numberType: number = CHART_NUMBER_TYPE;
+}
diff --git a/packages/vstory/src/story/character/component/character.ts b/packages/vstory/src/story/character/component/character.ts
index 5ae3240c..8ae0463b 100644
--- a/packages/vstory/src/story/character/component/character.ts
+++ b/packages/vstory/src/story/character/component/character.ts
@@ -7,6 +7,7 @@ import type { Graphic } from './graphic/graphic';
import { getLayoutFromWidget } from '../../utils/layout';
import type { StoryEvent } from '../../interface/runtime-interface';
import type { ICharacterPickInfo } from '../runtime-interface';
+import { ComponentGroup } from './character-group/component-group-graphic';
export abstract class CharacterComponent extends CharacterBase {
protected declare _spec: IComponentCharacterSpec;
@@ -34,7 +35,7 @@ export abstract class CharacterComponent extends CharacterBase {
}
protected _initGraphics(): void {
- this._group = createGroup({
+ this._group = new ComponentGroup({
...getLayoutFromWidget(this._spec.position),
angle: this._spec.options.angle,
zIndex: this._spec.zIndex
diff --git a/packages/vstory/src/story/character/component/characters/character-image.ts b/packages/vstory/src/story/character/component/characters/character-image.ts
index 33b2c3ad..d7b89ff3 100644
--- a/packages/vstory/src/story/character/component/characters/character-image.ts
+++ b/packages/vstory/src/story/character/component/characters/character-image.ts
@@ -1,11 +1,11 @@
import type { Graphic } from '../graphic/graphic';
import { CharacterComponent } from '../character';
-import { StoryGraphicType } from '../../../../constants/character';
+import { StoryComponentType } from '../../../../constants/character';
import { GraphicImage } from '../graphic/image';
export class CharacterComponentImage extends CharacterComponent {
readonly graphicType: string = 'image';
protected _createGraphic(): Graphic {
- return new GraphicImage(StoryGraphicType.IMAGE, this as any);
+ return new GraphicImage(StoryComponentType.IMAGE, this as any);
}
}
diff --git a/packages/vstory/src/story/character/component/characters/character-line.ts b/packages/vstory/src/story/character/component/characters/character-line.ts
index 1815c957..8cdf5fe6 100644
--- a/packages/vstory/src/story/character/component/characters/character-line.ts
+++ b/packages/vstory/src/story/character/component/characters/character-line.ts
@@ -1,11 +1,11 @@
import type { Graphic } from '../graphic/graphic';
import { GraphicLine } from '../graphic/line';
import { CharacterComponent } from '../character';
-import { StoryGraphicType } from '../../../../constants/character';
+import { StoryComponentType } from '../../../../constants/character';
export class CharacterComponentLine extends CharacterComponent {
readonly graphicType: string = 'line';
protected _createGraphic(): Graphic {
- return new GraphicLine(StoryGraphicType.RECT, this);
+ return new GraphicLine(StoryComponentType.RECT, this);
}
}
diff --git a/packages/vstory/src/story/character/component/characters/character-qipao.ts b/packages/vstory/src/story/character/component/characters/character-qipao.ts
index ad31b45b..e2b97ba3 100644
--- a/packages/vstory/src/story/character/component/characters/character-qipao.ts
+++ b/packages/vstory/src/story/character/component/characters/character-qipao.ts
@@ -5,6 +5,6 @@ import { CharacterComponent } from '../character';
export class CharacterComponentQipao extends CharacterComponent {
readonly graphicType: string = 'qipao';
protected _createGraphic(): Graphic {
- return new GraphicQipao('QipaoComponent', this);
+ return new GraphicQipao('Qipao', this);
}
}
diff --git a/packages/vstory/src/story/character/component/characters/character-rect.ts b/packages/vstory/src/story/character/component/characters/character-rect.ts
index 558ecc06..00d94437 100644
--- a/packages/vstory/src/story/character/component/characters/character-rect.ts
+++ b/packages/vstory/src/story/character/component/characters/character-rect.ts
@@ -1,11 +1,11 @@
import type { Graphic } from '../graphic/graphic';
import { GraphicRect } from '../graphic/rect';
import { CharacterComponent } from '../character';
-import { StoryGraphicType } from '../../../../constants/character';
+import { StoryComponentType } from '../../../../constants/character';
export class CharacterComponentRect extends CharacterComponent {
readonly graphicType: string = 'rect';
protected _createGraphic(): Graphic {
- return new GraphicRect(StoryGraphicType.RECT, this);
+ return new GraphicRect(StoryComponentType.RECT, this);
}
}
diff --git a/packages/vstory/src/story/character/component/characters/character-richtext.ts b/packages/vstory/src/story/character/component/characters/character-richtext.ts
index a662d990..e8fcd5b0 100644
--- a/packages/vstory/src/story/character/component/characters/character-richtext.ts
+++ b/packages/vstory/src/story/character/component/characters/character-richtext.ts
@@ -1,11 +1,11 @@
import type { Graphic } from '../graphic/graphic';
import { GraphicRichText } from '../graphic/richtext';
import { CharacterComponent } from '../character';
-import { StoryGraphicType } from '../../../../constants/character';
+import { StoryComponentType } from '../../../../constants/character';
export class CharacterComponentRichText extends CharacterComponent {
readonly graphicType: string = 'richtext';
protected _createGraphic(): Graphic {
- return new GraphicRichText(StoryGraphicType.RICH_TEXT, this as any);
+ return new GraphicRichText(StoryComponentType.RICH_TEXT, this as any);
}
}
diff --git a/packages/vstory/src/story/character/component/characters/character-shape.ts b/packages/vstory/src/story/character/component/characters/character-shape.ts
index 898d3433..386a5373 100644
--- a/packages/vstory/src/story/character/component/characters/character-shape.ts
+++ b/packages/vstory/src/story/character/component/characters/character-shape.ts
@@ -1,11 +1,11 @@
import type { Graphic } from '../graphic/graphic';
import { CharacterComponent } from '../character';
-import { StoryGraphicType } from '../../../../constants/character';
+import { StoryComponentType } from '../../../../constants/character';
import { GraphicSymbol } from '../graphic/symbol';
export class CharacterComponentShape extends CharacterComponent {
readonly graphicType: string = 'shape';
protected _createGraphic(): Graphic {
- return new GraphicSymbol(StoryGraphicType.SHAPE, this);
+ return new GraphicSymbol(StoryComponentType.SHAPE, this);
}
}
diff --git a/packages/vstory/src/story/character/component/characters/character-text.ts b/packages/vstory/src/story/character/component/characters/character-text.ts
index b2495311..f89681b5 100644
--- a/packages/vstory/src/story/character/component/characters/character-text.ts
+++ b/packages/vstory/src/story/character/component/characters/character-text.ts
@@ -1,7 +1,7 @@
import type { Graphic } from '../graphic/graphic';
import { GraphicPureText } from '../graphic/text';
import { CharacterComponent } from '../character';
-import { StoryGraphicType } from '../../../../constants/character';
+import { StoryComponentType } from '../../../../constants/character';
/**
* text component 没有关联 graphic，逻辑与 GraphicText 有所不同
@@ -9,6 +9,6 @@ import { StoryGraphicType } from '../../../../constants/character';
export class CharacterComponentText extends CharacterComponent {
readonly graphicType: string = 'text';
protected _createGraphic(): Graphic {
- return new GraphicPureText(StoryGraphicType.TEXT, this as any);
+ return new GraphicPureText(StoryComponentType.TEXT, this as any);
}
}
diff --git a/packages/vstory/src/story/character/runtime-interface.ts b/packages/vstory/src/story/character/runtime-interface.ts
index 61409fe9..9623c054 100644
--- a/packages/vstory/src/story/character/runtime-interface.ts
+++ b/packages/vstory/src/story/character/runtime-interface.ts
@@ -3,6 +3,7 @@ import type { IPointLike } from '@visactor/vutils';
import type { StoryCanvas } from '../canvas/canvas';
import type { IStory, IStoryCanvas, StoryEvent } from '../interface/runtime-interface';
import type { ICharacterSpec } from './dsl-interface';
+import type { Graphic } from './component/graphic/graphic';
export interface ICharacterPickInfo {
part: string;
@@ -17,7 +18,7 @@ export interface ICharacter {
show: () => void;
hide: () => void;
getGraphicParent: () => IGroup;
- graphic: IGroup;
+ graphic: Graphic | IGroup;
tickTo: (t: number) => void;
checkEvent: (event: StoryEvent) => false | (ICharacterPickInfo & any);
diff --git a/packages/vstory/src/story/index.ts b/packages/vstory/src/story/index.ts
index 1f5bc701..86e70883 100644
--- a/packages/vstory/src/story/index.ts
+++ b/packages/vstory/src/story/index.ts
@@ -7,19 +7,24 @@ import { ChartRender, VChartRender } from './character/chart/graphic/vchart-grap
import { CharacterComponentText } from './character/component/characters/character-text';
import { CharacterComponentRichText } from './character/component/characters/character-richtext';
import { VChartPicker } from './character/chart/graphic/vchart-graphic-picker';
-import { StoryGraphicType } from '../constants/character';
+import { StoryComponentType } from '../constants/character';
import { CharacterComponentLine } from './character/component/characters/character-line';
import { CharacterComponentImage } from './character/component/characters/character-image';
import { CharacterComponentShape } from './character/component/characters/character-shape';
import { VChartCharacter } from './character/chart/characters/vchart';
+import { ComponentGroupRender } from './character/component/character-group/component-group-graphic-render';
-const splitModule = new ContainerModule((bind: any) => {
+const splitModule = new ContainerModule(bind => {
// chart渲染器注入
bind(VChartRender).toSelf().inSingletonScope();
bind(ChartRender).toService(VChartRender);
bind(GraphicRender).toService(ChartRender);
bind(VChartPicker).to(VChartPicker).inSingletonScope();
bind(CanvasPickerContribution).toService(VChartPicker);
+
+ // component渲染器注入
+ bind(ComponentGroupRender).toSelf().inSingletonScope();
+ bind(GraphicRender).toService(ComponentGroupRender);
});
let _register = false;
@@ -33,13 +38,13 @@ export function registerCharacter() {
// StoryFactory.registerCharacter('BarChart', CharacterChart);
// StoryFactory.registerCharacter('CharacterChart', CharacterChart);
// StoryFactory.registerCharacter('LineChart', CharacterChart);
- StoryFactory.registerCharacter(StoryGraphicType.RECT, CharacterComponentRect);
- StoryFactory.registerCharacter(StoryGraphicType.TEXT, CharacterComponentText);
- StoryFactory.registerCharacter(StoryGraphicType.RICH_TEXT, CharacterComponentRichText);
- StoryFactory.registerCharacter(StoryGraphicType.QIPAO, CharacterComponentQipao);
- StoryFactory.registerCharacter(StoryGraphicType.LINE, CharacterComponentLine);
- StoryFactory.registerCharacter(StoryGraphicType.IMAGE, CharacterComponentImage);
- StoryFactory.registerCharacter(StoryGraphicType.SHAPE, CharacterComponentShape);
+ StoryFactory.registerCharacter(StoryComponentType.RECT, CharacterComponentRect);
+ StoryFactory.registerCharacter(StoryComponentType.TEXT, CharacterComponentText);
+ StoryFactory.registerCharacter(StoryComponentType.RICH_TEXT, CharacterComponentRichText);
+ StoryFactory.registerCharacter(StoryComponentType.QIPAO, CharacterComponentQipao);
+ StoryFactory.registerCharacter(StoryComponentType.LINE, CharacterComponentLine);
+ StoryFactory.registerCharacter(StoryComponentType.IMAGE, CharacterComponentImage);
+ StoryFactory.registerCharacter(StoryComponentType.SHAPE, CharacterComponentShape);
container.load(splitModule);
}