From 8549dbf6d2c51246c436d3dd957a31effe48b2bd Mon Sep 17 00:00:00 2001 From: zhouxinyu Date: Mon, 17 Jun 2024 17:47:04 +0800 Subject: [PATCH] feat: support playground --- common/config/rush/pnpm-lock.yaml | 46 + json1.json | 2058 +++++++++++++++++ json2.json | 1980 ++++++++++++++++ packages/vstory/demo/src/App.tsx | 5 + packages/vstory/demo/src/demos/Playground.tsx | 1382 +++++++++++ .../demo/src/demos/StoryBarDemoPlay.tsx | 1 - .../demo/src/demos/VChartSite/VChartSite.tsx | 20 +- .../demo/src/demos/VChartSite/scene1.tsx | 66 +- packages/vstory/package.json | 3 + .../vstory/src/edit/edit-component/common.ts | 8 +- .../edit/edit-component/richtext-selection.ts | 16 +- .../src/edit/edit-component/text-selection.ts | 6 +- packages/vstory/src/edit/interface.ts | 4 +- packages/vstory/src/story/canvas/canvas.ts | 19 +- .../src/story/character/chart/character.ts | 3 +- packages/vstory/src/story/player/ticker.ts | 3 - packages/vstory/src/story/story.ts | 18 +- 17 files changed, 5559 insertions(+), 79 deletions(-) create mode 100644 json1.json create mode 100644 json2.json create mode 100644 packages/vstory/demo/src/demos/Playground.tsx diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index b4b8f8e..60dab1c 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -63,6 +63,7 @@ importers: '@internal/bundler': workspace:* '@internal/eslint-config': workspace:* '@internal/ts-config': workspace:* + '@monaco-editor/react': ^4.6.0 '@rushstack/eslint-patch': ~1.1.4 '@types/jest': ^26.0.0 '@types/react': ^18.0.0 @@ -78,6 +79,8 @@ importers: jest: ^26.0.0 jest-electron: ^0.1.12 jest-extended: ^1.2.1 + monaco-editor: ^0.49.0 + re-resizable: ^6.9.17 react: ^18.0.0 react-dom: ^18.0.0 ts-jest: ^26.0.0 @@ -94,6 +97,7 @@ importers: '@internal/bundler': link:../../tools/bundler '@internal/eslint-config': link:../../share/eslint-config '@internal/ts-config': link:../../share/ts-config + '@monaco-editor/react': 4.6.0_attssj7v74q6tdwjgncsnxmc4e '@rushstack/eslint-patch': 1.1.4 '@types/jest': 26.0.24 '@types/react': 18.3.2 @@ -105,6 +109,8 @@ importers: jest: 26.6.3_canvas@2.11.2 jest-electron: 0.1.12_jest@26.6.3 jest-extended: 1.2.1 + monaco-editor: 0.49.0 + re-resizable: 6.9.17_nnrd3gsncyragczmpvfhocinkq react: 18.3.1 react-dom: 18.3.1_react@18.3.1 ts-jest: 26.5.6_xuote2qreek47x2di7kesslrai @@ -2144,6 +2150,28 @@ packages: - encoding - supports-color + /@monaco-editor/loader/1.4.0_monaco-editor@0.49.0: + resolution: {integrity: sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==} + peerDependencies: + monaco-editor: '>= 0.21.0 < 1' + dependencies: + monaco-editor: 0.49.0 + state-local: 1.0.7 + dev: true + + /@monaco-editor/react/4.6.0_attssj7v74q6tdwjgncsnxmc4e: + resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==} + peerDependencies: + monaco-editor: '>= 0.25.0 < 1' + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@monaco-editor/loader': 1.4.0_monaco-editor@0.49.0 + monaco-editor: 0.49.0 + react: 18.3.1 + react-dom: 18.3.1_react@18.3.1 + dev: true + /@nodelib/fs.scandir/2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -8676,6 +8704,10 @@ packages: ufo: 1.5.3 dev: true + /monaco-editor/0.49.0: + resolution: {integrity: sha512-2I8/T3X/hLxB2oPHgqcNYUVdA/ZEFShT7IAujifIPMfKkNbLOqY8XCoyHCXrsdjb36dW9MwoTwBCFpXKMwNwaQ==} + dev: true + /ms/2.0.0: resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} @@ -9503,6 +9535,16 @@ packages: safe-buffer: 5.2.1 dev: false + /re-resizable/6.9.17_nnrd3gsncyragczmpvfhocinkq: + resolution: {integrity: sha512-OBqd1BwVXpEJJn/yYROG+CbeqIDBWIp6wathlpB0kzZWWZIY1gPTsgK2yJEui5hOvkCdC2mcexF2V3DZVfLq2g==} + peerDependencies: + react: ^16.13.1 || ^17.0.0 || ^18.0.0 + react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.3.1 + react-dom: 18.3.1_react@18.3.1 + dev: true + /react-clientside-effect/1.2.6_react@18.3.1: resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==} peerDependencies: @@ -10451,6 +10493,10 @@ packages: resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} dev: true + /state-local/1.0.7: + resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==} + dev: true + /static-extend/0.1.2: resolution: {integrity: sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==} engines: {node: '>=0.10.0'} diff --git a/json1.json b/json1.json new file mode 100644 index 0000000..d6ae667 --- /dev/null +++ b/json1.json @@ -0,0 +1,2058 @@ +{ + "characters": [ + { + "type": "CharacterChart", + "id": "chart0", + "zIndex": 1, + "position": { + "top": 50, + "left": 120, + "width": 110, + "height": 110 + }, + "options": { + "attribute": {}, + "graphic": { + "text": "A BRIEF HISTORY", + "fontSize": 55, + "fontWeight": "bold" + }, + "panel": { + "fill": "white", + "shadowColor": "rgba(0, 0, 0, 0.05)", + "shadowBlur": 10, + "shadowOffsetX": 4, + "shadowOffsetY": 4 + } + } + }, + { + "type": "CharacterChart", + "id": "chart1", + "zIndex": 1, + "position": { + "top": 50, + "left": 290, + "width": 110, + "height": 110 + }, + "options": { + "attribute": {}, + "graphic": { + "text": "OF CHARTS", + "fontSize": 55, + "fontWeight": "bold" + }, + "panel": { + "fill": "white", + "shadowColor": "rgba(0, 0, 0, 0.05)", + "shadowBlur": 10, + "shadowOffsetX": 4, + "shadowOffsetY": 4 + } + } + }, + { + "type": "CharacterChart", + "id": "chart2", + "zIndex": 1, + "position": { + "top": 50, + "left": 460, + "width": 110, + "height": 110 + }, + "options": { + "attribute": {}, + "graphic": { + "width": 400, + "fontSize": 22, + "fontWeight": "bold", + "textConfig": [ + { + "text": "Powered By " + }, + { + "text": "VChart", + "fill": "blue" + } + ] + }, + "panel": { + "fill": "white", + "shadowColor": "rgba(0, 0, 0, 0.05)", + "shadowBlur": 10, + "shadowOffsetX": 4, + "shadowOffsetY": 4 + } + } + }, + { + "type": "RangeColumnChart", + "id": "chart3", + "zIndex": 1, + "position": { + "top": 50, + "left": 630, + "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 + } + } + }, + { + "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 + } + } + }, + { + "type": "BarChart", + "id": "chart4", + "zIndex": 1, + "position": { + "top": 50, + "left": 800, + "width": 110, + "height": 110 + }, + "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": "销售额" + }, + { + "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 + }, + { + "offset": 0, + "opacity": 0.6 + } + ] + } + }, + "state": { + "selected": { + "stroke": "#000", + "strokeWidth": 1 + } + } + }, + "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": "chart5", + "zIndex": 1, + "position": { + "top": 570, + "left": 120, + "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 + } + } + }, + { + "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 + } + } + }, + { + "type": "PieChart", + "id": "chart6", + "zIndex": 1, + "position": { + "top": 570, + "left": 290, + "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": "chart7", + "zIndex": 1, + "position": { + "top": 570, + "left": 460, + "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 + } + } + }, + { + "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 + } + } + }, + { + "type": "RoseChart", + "id": "chart8", + "zIndex": 1, + "position": { + "top": 570, + "left": 630, + "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 + } + } + }, + { + "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 + } + } + }, + { + "type": "RadarChart", + "id": "chart9", + "zIndex": 1, + "position": { + "top": 570, + "left": 800, + "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 + } + } + }, + { + "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": "chart10", + "zIndex": 1, + "position": { + "top": 570, + "left": 120, + "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 + } + ] + } + ], + "seriesSpec": [ + { + "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": "chart11", + "zIndex": 1, + "position": { + "top": 570, + "left": 290, + "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": [ + { + "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": [ + { + "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": "chart12", + "zIndex": 1, + "position": { + "top": 570, + "left": 460, + "width": 110, + "height": 110 + }, + "options": { + "attribute": {}, + "title": { + "text": "Sunburst Chart", + "orient": "bottom", + "align": "center", + "textStyle": { + "fontSize": 10, + "lineHeight": 10 + } + }, + "padding": 12, + "data": [ + { + "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": [ + { + "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": "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" + } + ] + } + } + }, + { + "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" + } + } + } + ], + "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/json2.json b/json2.json new file mode 100644 index 0000000..db53f6c --- /dev/null +++ b/json2.json @@ -0,0 +1,1980 @@ +{ + "characters": [ + { + "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 + } + } + }, + { + "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 + } + } + }, + { + "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 + } + }, + "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" + }, + "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 + } + } + } + } + ], + "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 + }, + "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 + } + } + }, + { + "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 + } + } + }, + { + "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 + } + } + }, + { + "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 + } + } + }, + { + "type": "RoseChart", + "id": "chart5", + "zIndex": 1, + "position": { + "top": 570, + "left": 120, + "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 + } + } + }, + { + "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 + } + } + }, + { + "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 + } + }, + "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 + } + } + }, + { + "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 + } + }, + "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 + } + ] + } + ], + "seriesSpec": [ + { + "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 + } + }, + "padding": 12, + "data": [ + { + "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": [ + { + "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 + } + }, + "padding": 12, + "data": [ + { + "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": [ + { + "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": "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" + } + ] + } + } + }, + { + "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" + } + } + } + ], + "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 e3bec77..7abd67d 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -14,6 +14,7 @@ import { DisAppear } from './demos/DisAppear'; import { StoryEdit } from './demos/StoryEdit'; import { Appear } from './demos/Appear'; import { GraphicEdit } from './demos/GraphicEdit'; +import { Playground } from './demos/Playground'; const App = () => { const [activeIndex, setActiveIndex] = useLocalStorage('menuIndex', 0); @@ -69,6 +70,10 @@ const App = () => { { name: 'GraphicEdit', component: GraphicEdit + }, + { + name: 'Playground', + component: Playground } ]; const selectedMenu = menus[activeIndex ?? menus.length - 1]; diff --git a/packages/vstory/demo/src/demos/Playground.tsx b/packages/vstory/demo/src/demos/Playground.tsx new file mode 100644 index 0000000..3aa5f5e --- /dev/null +++ b/packages/vstory/demo/src/demos/Playground.tsx @@ -0,0 +1,1382 @@ +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { IStorySpec } from '../../../src/story/interface'; +import { Story } from '../../../src/story/story'; +import { Edit } from '../../../src/edit/edit'; +import '../../../src/story/index'; +import { cloneDeep } from '@visactor/vutils'; +import { CommonEditComponent } from '../../../src/edit/edit-component/common'; +import { BoxSelection } from '../../../src/edit/edit-component/box-selection'; +import { TextSelection } from '../../../src/edit/edit-component/text-selection'; +import { RichTextSelection } from '../../../src/edit/edit-component/richtext-selection'; +import Editor, { DiffEditor, useMonaco, loader } from '@monaco-editor/react'; +import { Resizable, Enable } from 're-resizable'; + +Edit.registerEditComponent('common', CommonEditComponent); +Edit.registerEditComponent('text', TextSelection); +Edit.registerEditComponent('richtext', RichTextSelection); +Edit.registerEditComponent('box-selection', BoxSelection); + +const defaultCode = `const chartSpecList = [ + { + title: 'Timeline Chart', + characterType: 'RangeColumnChart', + options: { + 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.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 } + } + } + ] + } + }, + { + title: 'Bar Chart', + characterType: 'BarChart', + options: { + title: { + text: 'BarChart', + orient: 'bottom', + align: 'center', + textStyle: { + fontSize: 10, + lineHeight: 10 + } + }, + 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' }, + 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 + } + } + } + } + ], + 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'] + } + }, + { + title: 'Line/Area Chart', + characterType: 'AreaChart', + options: { + 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 } + } + }, + { + specKey: 'axes', + matchInfo: { orient: 'left' }, + spec: { + tick: { visible: false }, + label: { visible: false }, + grid: { visible: false } + } + } + ] + } + }, + { + title: 'Pie Chart', + characterType: 'PieChart', + options: { + 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 } + } + ] + } + }, + { + title: 'Scatter Chart', + characterType: 'ScatterChart', + options: { + 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 } + } + }, + { + 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 + } + } + } + } + ] + } + }, + { + title: 'Rose Chart', + characterType: 'RoseChart', + options: { + 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 } + } + }, + { + specKey: 'axes', + matchInfo: { orient: 'angle' }, + spec: { + domainLine: { visible: false, smooth: false }, + label: { + visible: false + }, + tick: { + visible: false + }, + grid: { visible: false } + } + } + ] + } + }, + { + title: 'Radar Chart', + characterType: 'RadarChart', + options: { + 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 } + } + }, + { + specKey: 'axes', + matchInfo: { orient: 'angle' }, + spec: { + domainLine: { visible: false, smooth: false }, + label: { + visible: false + }, + grid: { visible: false } + } + } + ] + } + }, + { + title: 'Word Cloud', + characterType: 'WordCloudChart', + options: { + 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 + } + ] + } + ], + seriesSpec: [ + { + matchInfo: { specIndex: 'all' }, + spec: { + valueField: 'sum_count', + seriesField: 'challenge_name', + nameField: 'challenge_name', + wordCloudConfig: { + drawOutOfBound: 'clip' + }, + maskShape: 'circle', + fontSizeRange: [5, 8] + } + } + ] + } + }, + { + title: 'TreeMap Chart', + characterType: 'TreeMapChart', + options: { + title: { + text: 'TreeMap Chart', + orient: 'bottom', + align: 'center', + textStyle: { + fontSize: 10, + lineHeight: 10 + } + }, + padding: 12, + data: [ + { + 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: [ + { + matchInfo: { specIndex: 'all' }, + spec: { + categoryField: 'name', + valueField: 'value', + legends: { visible: false }, + nodePadding: 1, + nonLeaf: { + visible: false + }, + nonLeafLabel: { + visible: false + }, + label: { + visible: false + } + } + } + ] + } + }, + { + title: 'Sunburst Chart', + characterType: 'SunburstChart', + options: { + title: { + text: 'Sunburst Chart', + orient: 'bottom', + align: 'center', + textStyle: { + fontSize: 10, + lineHeight: 10 + } + }, + padding: 12, + data: [ + { + 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: [ + { + matchInfo: { specIndex: 'all' }, + spec: { + offsetX: 0, + offsetY: 0, + categoryField: 'name', + valueField: 'value', + outerRadius: 1, + innerRadius: 0, + label: { + visible: false + } + } + } + ] + } + } +].map(item => ({ + ...item, + options: { + ...item.options, + panel: { + fill: 'white', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4 + } + } +})); + +const scene1Characters = chartSpecList.map((item, i) => ({ + type: item.characterType ?? 'CharacterChart', + id: \`chart\${i}\`, + zIndex: 1, + position: { + top: i < 5 ? 50 : 570, + left: 100 + (i % 5) * 170 + 20, + width: 110, + height: 110 + }, + options: { + spec: item.spec, + // data: data1, + // @ts-ignore + attribute: {}, + // @ts-ignore + ...(item.options ?? {}) + } +})); + +const scene1 = { + id: 'scene1', + actions: [ + ...new Array(5).fill(0).map((_, i) => ({ + characterId: \`chart\${i}\`, + characterActions: [ + { + startTime: i * 300 + 500, + duration: 1000, + action: 'appear', + payload: { + animation: { + duration: 1000 + } + } + } + ] + })), + ...new Array(5).fill(0).map((_, i) => ({ + characterId: \`chart\${9 - i}\`, + characterActions: [ + { + startTime: i * 300 + 500, + 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' + } + } + } + ] + }, + ...new Array(5).fill(0).map((_, i) => ({ + characterId: \`chart\${9 - i}\`, + characterActions: [ + { + startTime: i * 100 + 2500, + duration: 2000, + action: 'bounce', + payload: { + animation: { + duration: 2000 + } + } + } + ] + })), + ...new Array(5).fill(0).map((_, i) => ({ + characterId: \`chart\${i}\`, + characterActions: [ + { + startTime: i * 100 + 2500, + 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' + } + } + } + ] + }, + ...new Array(10).fill(0).map((_, i) => ({ + characterId: \`chart\${9 - i}\`, + 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' + } + } + } + ] + } + ] +}; + +const scene2Characters = [ + { + 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' + } + ] + } + } + }, + { + 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' + } + } + } +] + +const scene2 = { + 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' + } + } + } + ] + } + ] +} + +scene1Characters.forEach(c => { + c.position.left = c.position.left / 3 * 2; + c.position.top = c.position.top / 3 * 2; +}); +scene2Characters.forEach(c => { + c.position.left = c.position.left / 3 * 2; + c.position.top = c.position.top / 3 * 2; +}); + +const tempSpec = { + characters: [ + ...scene1Characters, + ...scene2Characters + ], + acts: [ + { + id: 'default-chapter', + scenes: [ + scene1, + scene2 + ] + } + ] +}; + +return tempSpec;`; + +interface IPlayerPropsType { + code: string; +} + +export function Player(props: IPlayerPropsType) { + const storyRef = useRef(); + useEffect(() => { + if (!props.code) { + return; + } + if (storyRef.current) { + storyRef.current.release(); + } + let json; + try { + json = JSON.parse(props.code); + } catch (err) { + try { + const func = new Function(props.code); + json = func(); + } catch (err) { + return; + } + } + console.log(json); + const story = new Story(json, { dom: 'abc' }); + storyRef.current = story; + story.play(); + }, [props.code]); + return
; +} + +export const Playground = () => { + const [code, setCode] = useState(defaultCode); + const stoRef = useRef(); + const time = 2000; + + const handleChangeCode = useCallback((code: string) => { + if (stoRef.current) { + clearTimeout(stoRef.current); + } + stoRef.current = setTimeout(() => { + setCode(code); + }, time); + }, []); + + return ( +
+
VStory Playground
+
+
+ +
+ +
+ handleChangeCode(v || '')} /> +
+ +
+
+ ); +}; diff --git a/packages/vstory/demo/src/demos/StoryBarDemoPlay.tsx b/packages/vstory/demo/src/demos/StoryBarDemoPlay.tsx index 6f736ef..5285930 100644 --- a/packages/vstory/demo/src/demos/StoryBarDemoPlay.tsx +++ b/packages/vstory/demo/src/demos/StoryBarDemoPlay.tsx @@ -1,6 +1,5 @@ import React, { useEffect } from 'react'; import VChart, { IChartSpec } from '@visactor/vchart'; -import { ManualTicker } from '@visactor/vrender-core'; import { StoryBar } from '../../../src/dsl/story-chart'; import { StoryExecutor } from '../../../src/dsl/story-executor'; diff --git a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx index 5ee5a9c..b8dcc9d 100644 --- a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx @@ -17,23 +17,25 @@ export const VChartSiteDemo = () => { // 准备一个图表 const tempSpec: IStorySpec = { characters: [ - // ...scene1Characters, - // ...scene2Characters, + ...scene1Characters, + ...scene2Characters // ...scene3Characters, // ...scene4Characters, // ...scene5Characters, - ...scene6Characters, - ...scene7Characters, - ...scene8Characters + // ...scene6Characters, + // ...scene7Characters, + // ...scene8Characters ], acts: [ { id: 'default-chapter', scenes: [ - // scene1, scene2, scene3, scene4, scene5, - scene6, - scene7, - scene8 + scene1, + scene2 + // scene3, scene4, scene5, + // scene6, + // scene7, + // scene8 ] } ] diff --git a/packages/vstory/demo/src/demos/VChartSite/scene1.tsx b/packages/vstory/demo/src/demos/VChartSite/scene1.tsx index 6d699e8..20d6908 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene1.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene1.tsx @@ -867,7 +867,7 @@ const chartSpecList = [ } })); -export const scene1Characters: ICharacterSpec[] = chartSpecList.map((item, i) => ({ +export const scene1Characters = chartSpecList.map((item, i) => ({ type: item.characterType ?? 'CharacterChart', id: `chart${i}`, zIndex: 1, @@ -887,45 +887,39 @@ export const scene1Characters: ICharacterSpec[] = chartSpecList.map((item, i) => } })); -export const scene1: ISceneSpec = { +export const scene1 = { id: 'scene1', actions: [ - ...new Array(5).fill(0).map( - (_, i) => - ({ - characterId: `chart${i}`, - characterActions: [ - { - startTime: i * 300 + 500, - duration: 1000, - action: 'appear', - payload: { - animation: { - duration: 1000 - } - } + ...new Array(5).fill(0).map((_, i) => ({ + characterId: `chart${i}`, + characterActions: [ + { + startTime: i * 300 + 500, + duration: 1000, + action: 'appear', + payload: { + animation: { + duration: 1000 } - ] - } as ICharacterLink) - ), - ...new Array(5).fill(0).map( - (_, i) => - ({ - characterId: `chart${9 - i}`, - characterActions: [ - { - startTime: i * 300 + 500, - duration: 1000, - action: 'appear', - payload: { - animation: { - duration: 1000 - } - } + } + } + ] + })), + ...new Array(5).fill(0).map((_, i) => ({ + characterId: `chart${9 - i}`, + characterActions: [ + { + startTime: i * 300 + 500, + duration: 1000, + action: 'appear', + payload: { + animation: { + duration: 1000 } - ] - } as ICharacterLink) - ), + } + } + ] + })), { characterId: `title1`, characterActions: [ diff --git a/packages/vstory/package.json b/packages/vstory/package.json index 218fc84..d61af62 100644 --- a/packages/vstory/package.json +++ b/packages/vstory/package.json @@ -40,6 +40,9 @@ "canvas": "2.11.2", "react": "^18.0.0", "react-dom": "^18.0.0", + "@monaco-editor/react": "^4.6.0", + "monaco-editor": "^0.49.0", + "re-resizable": "^6.9.17", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@vitejs/plugin-react": "3.1.0", diff --git a/packages/vstory/src/edit/edit-component/common.ts b/packages/vstory/src/edit/edit-component/common.ts index 85ff2db..fccc915 100644 --- a/packages/vstory/src/edit/edit-component/common.ts +++ b/packages/vstory/src/edit/edit-component/common.ts @@ -1,4 +1,4 @@ -import type { IEditComponent, IEditSelectionInfo } from './../interface'; +import type { IEditActionInfo, IEditComponent, IEditSelectionInfo } from './../interface'; import { EditActionEnum } from './../interface'; import type { Edit } from '../edit'; import { BaseSelection } from './base-selection'; @@ -14,18 +14,18 @@ export class CommonEditComponent extends BaseSelection implements IEditComponent super.editEnd(); return; } - checkAction(actionInfo: IEditSelectionInfo): boolean { + checkAction(actionInfo: IEditSelectionInfo | IEditActionInfo): boolean { if (actionInfo.type !== EditActionEnum.singleSelection) { return false; } - if (!actionInfo.detail) { + if (!(actionInfo as IEditSelectionInfo).detail) { return false; } this.startEdit(actionInfo); return true; } - startEdit(actionInfo: IEditSelectionInfo) { + startEdit(actionInfo: IEditSelectionInfo | IEditActionInfo) { super.startEdit(actionInfo); this.edit.startEdit({ type: 'commonEdit', diff --git a/packages/vstory/src/edit/edit-component/richtext-selection.ts b/packages/vstory/src/edit/edit-component/richtext-selection.ts index c0d4477..6fa4705 100644 --- a/packages/vstory/src/edit/edit-component/richtext-selection.ts +++ b/packages/vstory/src/edit/edit-component/richtext-selection.ts @@ -22,16 +22,19 @@ export class RichTextSelection extends BaseSelection implements IEditComponent { super.editEnd(); return; } - checkAction(actionInfo: IEditSelectionInfo): boolean { + checkAction(actionInfo: IEditSelectionInfo | IEditActionInfo): boolean { if (this.isEditing) { return this.checkActionWhileEditing(actionInfo); } return this.checkActionWhileNoEditing(actionInfo); } - checkActionWhileEditing(actionInfo: IEditSelectionInfo): boolean { + checkActionWhileEditing(actionInfo: IEditSelectionInfo | IEditActionInfo): boolean { // 点到其他内容了，return false - if (actionInfo.type === EditActionEnum.singleSelection && actionInfo.detail.graphicType !== this.type) { + if ( + actionInfo.type === EditActionEnum.singleSelection && + (actionInfo as IEditSelectionInfo).detail.graphicType !== this.type + ) { return false; } @@ -43,8 +46,11 @@ export class RichTextSelection extends BaseSelection implements IEditComponent { return true; } - checkActionWhileNoEditing(actionInfo: IEditSelectionInfo): boolean { - if (actionInfo.type === EditActionEnum.singleSelection && actionInfo.detail.graphicType === this.type) { + checkActionWhileNoEditing(actionInfo: IEditSelectionInfo | IEditActionInfo): boolean { + if ( + actionInfo.type === EditActionEnum.singleSelection && + (actionInfo as IEditSelectionInfo).detail.graphicType === this.type + ) { this.startEdit(actionInfo); // graphic return true; diff --git a/packages/vstory/src/edit/edit-component/text-selection.ts b/packages/vstory/src/edit/edit-component/text-selection.ts index f2d2e82..de921e8 100644 --- a/packages/vstory/src/edit/edit-component/text-selection.ts +++ b/packages/vstory/src/edit/edit-component/text-selection.ts @@ -14,14 +14,14 @@ export class TextSelection extends BaseSelection implements IEditComponent { super.editEnd(); return; } - checkAction(actionInfo: IEditSelectionInfo): boolean { + checkAction(actionInfo: IEditSelectionInfo | IEditActionInfo): boolean { if (actionInfo.type !== EditActionEnum.singleSelection) { return false; } - if (!actionInfo.detail) { + if (!(actionInfo as IEditSelectionInfo).detail) { return false; } - if (actionInfo.detail.graphicType !== 'text') { + if ((actionInfo as IEditSelectionInfo).detail.graphicType !== 'text') { return false; } this.startEdit(actionInfo); diff --git a/packages/vstory/src/edit/interface.ts b/packages/vstory/src/edit/interface.ts index 4d26151..44b65cc 100644 --- a/packages/vstory/src/edit/interface.ts +++ b/packages/vstory/src/edit/interface.ts @@ -42,12 +42,12 @@ export interface IEditComponent { isEditing: boolean; // 是否 开始/继续 编辑 返回false的话，会导致当前编辑结束 - checkAction: (actionInfo: IEditActionInfo) => boolean; + checkAction: (actionInfo: IEditActionInfo | IEditSelectionInfo) => boolean; // 编辑结束 editEnd: () => void; - getActiveCharacter: () => ICharacter | null; + getActiveCharacter: () => ICharacter | null | undefined; } export type IModelInfoSpecKey = { diff --git a/packages/vstory/src/story/canvas/canvas.ts b/packages/vstory/src/story/canvas/canvas.ts index 61af06a..e50b24b 100644 --- a/packages/vstory/src/story/canvas/canvas.ts +++ b/packages/vstory/src/story/canvas/canvas.ts @@ -1,9 +1,9 @@ -import { Story } from '../story'; -import { IStage, createStage, vglobal, container, preLoadAllModule, ManualTicker } from '@visactor/vrender-core'; +import type { Story } from '../story'; +import type { IStage } from '@visactor/vrender-core'; +import { createStage, vglobal, container, preLoadAllModule, ManualTicker } from '@visactor/vrender-core'; import { loadBrowserEnv } from '@visactor/vrender-kits'; -import { manualTicker } from '../player/ticker'; -import { StoryEvent } from '../interface/runtime-interface'; -import { ICharacter } from '../character/runtime-interface'; +import type { StoryEvent } from '../interface/runtime-interface'; +import type { ICharacter } from '../character/runtime-interface'; preLoadAllModule(); loadBrowserEnv(container); @@ -49,7 +49,7 @@ export class StoryCanvas { canvasControled: true, autoRender: false, disableDirtyBounds: true, - ticker: manualTicker, + ticker: new ManualTicker([]), dpr: window.devicePixelRatio, event: { clickInterval: 300 @@ -58,11 +58,12 @@ export class StoryCanvas { // @ts-ignore this._stage = stage; stage.on('*', (e, type) => { + // eslint-disable-next-line no-console type === 'click' && console.log('canvas', e); }); } - public getEventDetail(event: StoryEvent) { + getEventDetail(event: StoryEvent) { // 得到交互元素的详细信息 const characterMap = this._story.getCharacters(); let characterInfo; @@ -83,4 +84,8 @@ export class StoryCanvas { characterInfo }; } + + release() { + this._stage.release(); + } } diff --git a/packages/vstory/src/story/character/chart/character.ts b/packages/vstory/src/story/character/chart/character.ts index 5f9e5d3..142c574 100644 --- a/packages/vstory/src/story/character/chart/character.ts +++ b/packages/vstory/src/story/character/chart/character.ts @@ -10,7 +10,6 @@ import { CharacterVisactor } from '../visactor/character'; import { SpecProcess } from './spec-process/spec-process'; import { ChartDataTempTransform } from './spec-process/data-temp-transform'; import type { ITicker } from '@visactor/vrender-core'; -import { manualTicker } from '../../player/ticker'; import type { IChartTemp } from './temp/interface'; import { SeriesSpecRuntime } from './runtime/series-spec'; import type { StoryEvent } from '../../interface/runtime-interface'; @@ -89,7 +88,7 @@ export class CharacterChart extends CharacterVisactor { autoRender: false, disableDirtyBounds: true, viewBox, - ticker: manualTicker, + ticker: this._option.canvas.getStage().ticker, visibleAll: false, ...(this._spec.options.panel ?? {}), chartInitOptions: { diff --git a/packages/vstory/src/story/player/ticker.ts b/packages/vstory/src/story/player/ticker.ts index a304b72..e69de29 100644 --- a/packages/vstory/src/story/player/ticker.ts +++ b/packages/vstory/src/story/player/ticker.ts @@ -1,3 +0,0 @@ -import { ManualTicker } from '@visactor/vrender-core'; - -export const manualTicker = new ManualTicker([]); diff --git a/packages/vstory/src/story/story.ts b/packages/vstory/src/story/story.ts index 9757ad0..7e2eec7 100644 --- a/packages/vstory/src/story/story.ts +++ b/packages/vstory/src/story/story.ts @@ -1,12 +1,12 @@ -import { ICharacterSpec } from './character/dsl-interface'; +import type { ICharacterSpec } from './character/dsl-interface'; import { isString } from '@visactor/vutils'; -import { IStory, IStoryInitOption } from './interface/runtime-interface'; -import { ICharacter } from './character/runtime-interface'; +import type { IStory, IStoryInitOption } from './interface/runtime-interface'; +import type { ICharacter } from './character/runtime-interface'; import { StoryCanvas } from './canvas/canvas'; -import { IStorySpec, ICharacterLink, IActSpec } from './interface'; +import type { IStorySpec, ICharacterLink, IActSpec } from './interface'; import { StoryFactory } from './factory/factory'; import { defaultTicker, defaultTimeline } from '@visactor/vrender-core'; -import { IPlayer } from './interface/player'; +import type { IPlayer } from './interface/player'; import { Player } from './player'; defaultTicker.remTimeline(defaultTimeline); @@ -36,7 +36,6 @@ export class Story implements IStory { if (spec) { this.load(spec); } - console.log(this); } load(spec: IStorySpec) { @@ -49,7 +48,7 @@ export class Story implements IStory { }); } - public getCharacters(): { [key: string]: ICharacter } { + getCharacters(): { [key: string]: ICharacter } { return this._characters; } @@ -84,4 +83,9 @@ export class Story implements IStory { getPlayer() { return this._player; } + + release() { + this._player.release(); + this._canvas.release(); + } }