diff --git a/.github/workflows/release-changelog.yml b/.github/workflows/release-changelog.yml index dbddebbb..8a1823b9 100644 --- a/.github/workflows/release-changelog.yml +++ b/.github/workflows/release-changelog.yml @@ -61,7 +61,7 @@ jobs: with: token: ${{ secrets.GITHUB_TOKEN }} title: '[Auto changelog] changlog of ${{ github.event.release.tag_name }}' - base: feat/vstory-next + base: develop head: 'docs/generate-changelog-${{ github.event.release.tag_name }}' labels: changelog body: 'update changelog of ${{ github.event.release.tag_name }}' diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index ff366da4..a0c646d1 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -69,6 +69,9 @@ jobs: - name: Build vstory-player run: node common/scripts/install-run-rush.js build --only @visactor/vstory-player + - name: Build vstory-external + run: node common/scripts/install-run-rush.js build --only @visactor/vstory-external + - name: Build vstory env: NODE_OPTIONS: "--max_old_space_size=4096" diff --git a/.github/workflows/sync-main-to-develop.yml b/.github/workflows/sync-main-to-develop.yml index 70772c61..0cbcbc2c 100644 --- a/.github/workflows/sync-main-to-develop.yml +++ b/.github/workflows/sync-main-to-develop.yml @@ -55,7 +55,7 @@ jobs: with: token: ${{ secrets.GITHUB_TOKEN }} title: '[Auto Sync] Sync the code from branch main to branch develop after release ${{ steps.package-version.outputs.current_version }}' - base: feat/vstory-next + base: develop head: sync/main-${{ steps.package-version.outputs.current_version }} reviewers: xile611 body: 'Sync the code from branch main to branch develop after release ${{ steps.package-version.outputs.current_version }}' diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index bc97874b..ed976080 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -19,7 +19,7 @@ importers: '@types/markdown-it': ^13.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vstory': workspace:0.0.13 + '@visactor/vstory': workspace:0.0.14 '@visactor/vutils': ~0.18.17 '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 @@ -78,11 +78,12 @@ importers: '@types/jest': ^26.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vstory-animate': workspace:0.0.13 - '@visactor/vstory-core': workspace:0.0.13 - '@visactor/vstory-editor': workspace:0.0.13 - '@visactor/vstory-player': workspace:0.0.13 - '@visactor/vstory-templates': workspace:0.0.13 + '@visactor/vstory-animate': workspace:0.0.14 + '@visactor/vstory-core': workspace:0.0.14 + '@visactor/vstory-editor': workspace:0.0.14 + '@visactor/vstory-external': workspace:0.0.14 + '@visactor/vstory-player': workspace:0.0.14 + '@visactor/vstory-templates': workspace:0.0.14 '@visactor/vutils': ~0.18.17 '@vitejs/plugin-react': 3.1.0 canvas: 2.11.2 @@ -101,6 +102,7 @@ importers: '@visactor/vstory-animate': link:../vstory-animate '@visactor/vstory-core': link:../vstory-core '@visactor/vstory-editor': link:../vstory-editor + '@visactor/vstory-external': link:../vstory-external '@visactor/vstory-player': link:../vstory-player '@visactor/vstory-templates': link:../vstory-templates devDependencies: @@ -151,7 +153,7 @@ importers: '@visactor/vrender-core': 0.21.0-vstory.2 '@visactor/vrender-kits': 0.21.0-vstory.2 '@visactor/vscale': 0.18.5 - '@visactor/vstory-core': workspace:0.0.13 + '@visactor/vstory-core': workspace:0.0.14 '@visactor/vtable': 1.10.1 '@visactor/vutils': ~0.18.17 '@vitejs/plugin-react': 3.1.0 @@ -299,7 +301,7 @@ importers: '@visactor/vrender-core': 0.21.0-vstory.2 '@visactor/vrender-kits': 0.21.0-vstory.2 '@visactor/vscale': 0.18.5 - '@visactor/vstory-core': workspace:0.0.13 + '@visactor/vstory-core': workspace:0.0.14 '@visactor/vtable': 1.10.1 '@visactor/vutils': ~0.18.17 '@vitejs/plugin-react': 3.1.0 @@ -374,9 +376,9 @@ importers: '@visactor/vrender-core': 0.21.0-vstory.2 '@visactor/vrender-kits': 0.21.0-vstory.2 '@visactor/vscale': 0.18.5 - '@visactor/vstory-animate': workspace:0.0.13 - '@visactor/vstory-core': workspace:0.0.13 - '@visactor/vstory-player': workspace:0.0.13 + '@visactor/vstory-animate': workspace:0.0.14 + '@visactor/vstory-core': workspace:0.0.14 + '@visactor/vstory-player': workspace:0.0.14 '@visactor/vtable': 1.10.1 '@visactor/vutils': ~0.18.17 '@vitejs/plugin-react': 3.1.0 @@ -453,8 +455,8 @@ importers: '@visactor/vrender-core': 0.21.0-vstory.2 '@visactor/vrender-kits': 0.21.0-vstory.2 '@visactor/vscale': 0.18.5 - '@visactor/vstory-animate': workspace:0.0.13 - '@visactor/vstory-core': workspace:0.0.13 + '@visactor/vstory-animate': workspace:0.0.14 + '@visactor/vstory-core': workspace:0.0.14 '@visactor/vtable': 1.10.1 '@visactor/vutils': ~0.18.17 '@vitejs/plugin-react': 3.1.0 @@ -530,7 +532,7 @@ importers: '@visactor/vrender-core': 0.21.0-vstory.2 '@visactor/vrender-kits': 0.21.0-vstory.2 '@visactor/vscale': 0.18.5 - '@visactor/vstory-core': workspace:0.0.13 + '@visactor/vstory-core': workspace:0.0.14 '@visactor/vtable': 1.10.1 '@visactor/vutils': ~0.18.17 '@vitejs/plugin-react': 3.1.0 @@ -631,7 +633,7 @@ importers: '@rushstack/eslint-patch': ~1.1.4 '@types/node': '*' '@types/node-fetch': 2.6.4 - '@visactor/vstory': workspace:0.0.13 + '@visactor/vstory': workspace:0.0.14 eslint: ~8.18.0 form-data: ~4.0.0 node-fetch: 2.6.6 diff --git a/common/config/rush/version-policies.json b/common/config/rush/version-policies.json index ad7cd863..94191e73 100644 --- a/common/config/rush/version-policies.json +++ b/common/config/rush/version-policies.json @@ -1 +1 @@ -[{"definitionName":"lockStepVersion","policyName":"vstoryMain","version":"0.0.13","nextBump":"patch"}] +[{"definitionName":"lockStepVersion","policyName":"vstoryMain","version":"0.0.14","nextBump":"patch"}] diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json index af10d155..fc037ee2 100644 --- a/docs/assets/guide/menu.json +++ b/docs/assets/guide/menu.json @@ -69,8 +69,8 @@ { "path": "story-player", "title": { - "zh": "Story-Player", - "en": "Story-Player" + "zh": "Story 和 Player", + "en": "Story and Player" } } ] diff --git a/docs/assets/guide/zh/tutorial_docs/Basic/A_Basic_DSL.md b/docs/assets/guide/zh/tutorial_docs/Basic/A_Basic_DSL.md index faa8a82f..9c6a36ce 100644 --- a/docs/assets/guide/zh/tutorial_docs/Basic/A_Basic_DSL.md +++ b/docs/assets/guide/zh/tutorial_docs/Basic/A_Basic_DSL.md @@ -12,9 +12,9 @@ 一个仪表盘会包含多种图表、以及标题、表格等模块、这些模块一部分可以使用VStory中提供的特定character实现,还有一些可以通过VChart自行去配置。在本教程中,我们将简化物料准备过程,直接给到所有用到的图表spec。 -1. 一个基于VChart的简单的柱状图 +1. 一个基于`VChart`的简单的柱状图 ```javascript livedemo template=vchart -const mockData: any = []; +const mockData = []; const types = ['A', 'B', 'C']; types.forEach(type => { @@ -44,9 +44,9 @@ vchart.renderSync(); window['vchart'] = vchart; ``` -2. 一个基于VChart的简单的面积图 +2. 一个基于`VChart`的简单的面积图 ```javascript livedemo template=vchart -const mockData: any = []; +const mockData = []; const types = ['A', 'B', 'C']; types.forEach(type => { @@ -60,7 +60,7 @@ const spec = { data: [ { id: 'id0', - values: mockData.filter((item: any) => item.type !== 'C') + values: mockData.filter((item) => item.type !== 'C') } ], xField: 'month', @@ -81,9 +81,9 @@ vchart.renderSync(); window['vchart'] = vchart; ``` -3. 一个基于VChart的简单的雷达图 +3. 一个基于`VChart`的简单的雷达图 ```javascript livedemo template=vchart -const mockData: any = []; +const mockData = []; const types = ['A', 'B', 'C']; types.forEach(type => { @@ -132,9 +132,9 @@ vchart.renderSync(); // Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart; ``` -4. 一个基于VChart的简单的玫瑰图 +4. 一个基于`VChart`的简单的玫瑰图 ```javascript livedemo template=vchart -const mockData: any = []; +const mockData = []; const types = ['A', 'B', 'C']; types.forEach(type => { @@ -170,9 +170,9 @@ vchart.renderSync(); // Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart; ``` -5. 一个基于VChart的简单的仪表盘图 +5. 一个基于`VChart`的简单的仪表盘图 ```javascript livedemo template=vchart -const mockData: any = []; +const mockData = []; const types = ['A', 'B', 'C']; types.forEach(type => { @@ -209,10 +209,15 @@ vchart.renderSync(); window['vchart'] = vchart; ``` -6. 使用一个VStory的Text类型作为标题 +6. 使用一个`VStory`的`Text`类型作为标题 ```javascript livedemo template=vstory // 注册所有需要的内容 VStory.registerAll(); + +const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + story.addCharacterWithAppear({ type: 'Text', id: 'title', @@ -239,19 +244,15 @@ story.addCharacterWithAppear({ } }); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); -const player = new VStory.Player(story); -story.init(player); - player.play(-1); window.vstory = story; ``` -7. 使用一个VStory的WaveScatter图表类型 +7. 使用一个`VStory`的`WaveScatter`图表类型 ```javascript livedemo template=vstory // 注册所有需要的内容 VStory.registerAll(); -const mockData: any = []; +const mockData = []; const types = ['A', 'B', 'C']; types.forEach(type => { @@ -260,6 +261,10 @@ types.forEach(type => { } }); +const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + story.addCharacterWithAppear({ type: 'WaveScatter', id: 'wave-scatter', @@ -272,7 +277,7 @@ story.addCharacterWithAppear({ }, options: { data: { - values: mockData.filter((item: any) => item.type === 'A') + values: mockData.filter((item) => item.type === 'A') }, categoryField: 'month', valueField: 'value', @@ -295,21 +300,17 @@ story.addCharacterWithAppear({ } }); -const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); -const player = new VStory.Player(story); -story.init(player); - player.play(-1); window.vstory = story; ``` ## 2. 拼接 -接下来,我们将这些素材拼接到VStory的大画布中,形成一个完整的作品,我们使用1920 * 1080作为画布的完整尺寸,图表之间的margin为30px,距离左右边界的margin也是30px。具体的布局如下图所示 +接下来,我们将这些素材拼接到`VStory`的大画布中,形成一个完整的作品,我们使用1920 * 1080作为画布的完整尺寸,图表之间的`margin`为30px,距离左右边界的`margin`也是30px。具体的布局如下图所示 ![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/dashboard_layout_detail.png) -完成了布局的设计之后,接下来我们开始DSL的编写,来实现上图中的效果,DSL核心包括一个character数组和一个acts数组,character数组包含了作品中的所有角色(元素),acts数组包含了作品中的各种角色的各种动作(动画),具体的接口定义如下: +完成了布局的设计之后,接下来我们开始DSL的编写,来实现上图中的效果,DSL核心包括一个`character`数组和一个`acts`数组,`character`数组包含了作品中的所有角色(元素),`acts`数组包含了作品中的各种角色的各种动作(动画),具体的接口定义如下: ```ts interface IStoryDSL { @@ -356,7 +357,7 @@ interface IAction { ``` ### 2.1 character数组配置 -根据我们提供的每个character的配置,以及接口定义,我们可以组装我们的character数组。 +根据我们提供的每个`character`的配置,以及接口定义,我们可以组装我们的`character`数组。 ```ts const characters = [ @@ -394,7 +395,7 @@ const characters = [ }, options: { data: { - values: mockData.filter((item: any) => item.type === 'A') + values: mockData.filter((item) => item.type === 'A') }, categoryField: 'month', valueField: 'value', @@ -535,7 +536,7 @@ const characters = [ ] ``` ### 2.2 acts数组配置 -characters数组中只是定义了作品中有这些元素可用,具体的动作还没有定义,如果不定义动作的话,元素将不会展示,所以接下来我们开始定义acts数组。我们期望作品中的元素有如下动作 +`characters`数组中只是定义了作品中有这些元素可用,具体的动作还没有定义,如果不定义动作的话,元素将不会展示,所以接下来我们开始定义`acts`数组。我们期望作品中的元素有如下动作 1. 柱状图和玫瑰图会有`oneByOne`(图元一个接着一个)的`appear`(入场)动画效果,其他图表都是默认的`appear`(入场)的动画效果 2. 包含图表本身的面板也要有一个`bounce`(弹跳)的`appear`(入场)的动画效果 @@ -607,7 +608,7 @@ const acts = [ ## 3. 播放 -至此,我们已经完成了一个简易的仪表盘的制作步骤,接下来,我们将character和acts数组拼起来合成一个DSL,然后使用 VStory 进行播放。 +至此,我们已经完成了一个简易的仪表盘的制作步骤,接下来,我们将`character`和`acts`数组拼起来合成一个DSL,然后使用 VStory 进行播放。 ```ts // 注册所有需要的内容 @@ -998,4 +999,4 @@ window['story'] = story; window['vstory'] = story; ``` -通过本教程,您已经了解了一份基础的 DSL 配置组成,后面你可以尝试更改Character和Acts,探索 VStory 的强大功能和灵活性,编绘出绚丽多彩的作品。祝您编码愉快! +通过本教程,您已经了解了一份基础的 DSL 配置组成,后面你可以尝试更改`character`和`acts`,探索 VStory 的强大功能和灵活性,编绘出绚丽多彩的作品。祝您编码愉快! diff --git a/docs/assets/guide/zh/tutorial_docs/VStory_Concepts/dsl.md b/docs/assets/guide/zh/tutorial_docs/VStory_Concepts/dsl.md index eaa9a3a3..ede911f3 100644 --- a/docs/assets/guide/zh/tutorial_docs/VStory_Concepts/dsl.md +++ b/docs/assets/guide/zh/tutorial_docs/VStory_Concepts/dsl.md @@ -3,11 +3,11 @@ DSL是描述一个VStory作品的JSON格式。其中定义了这个作品中使用了哪些元素,以及相关配置。描述了这个作品是如何编排的,什么元素在什么时刻做了什么行为。关于DSL的快速实战入门请参考[一份基础的 DSL](../Basic/A_Basic_DSL)。本节教程将详细介绍DSL的具体定义。 ## 结构 -DSL 是一个 JSON 格式的对象,包含以下几个字段: -1. character数组 - character 数组用于描述这个作品中使用了哪些元素,以及相关配置。 -2. acts数组 - acts 数组用于描述这个作品是如何编排的,什么元素在什么时刻做了什么行为。 +`DSL` 是一个 JSON 格式的对象,包含以下几个字段: +1. `character`数组 + `character` 数组用于描述这个作品中使用了哪些元素,以及相关配置。 +2. `acts`数组 + `acts` 数组用于描述这个作品是如何编排的,什么元素在什么时刻做了什么行为。 ```ts interface IStoryDSL { @@ -17,7 +17,7 @@ interface IStoryDSL { ``` ### character数组 -character 数组用于描述这个作品中使用了哪些类型的元素,以及相关配置。其中包含位置大小(position),层级(layout)。 +`character` 数组用于描述这个作品中使用了哪些类型的元素,以及相关配置。其中包含位置大小(`position`),层级(`layout`)。 ```ts type ICharacterConfig = IChartCharacterConfig | IComponentCharacterConfig; @@ -50,7 +50,7 @@ interface ICharacterConfigBase { } ``` -目前character有三大类型,分别是图表、组件、表格。主要是因为这三大类型的配置有较大差异,然后每个类型下面还有无数的子类型,比如组件类型,你可以自定义任意的组件,然后注册到VStory中在DSL中使用。 +目前`character`有三大类型,分别是图表、组件、表格。主要是因为这三大类型的配置有较大差异,然后每个类型下面还有无数的子类型,比如组件类型,你可以自定义任意的组件,然后注册到VStory中在DSL中使用。 #### 图表类型 @@ -103,7 +103,7 @@ interface IChartCharacterConfig extends ICharacterConfigBase { #### 组件类型 文字、图片等都属于组件类型,如果需要在VStory中使用自定义组件,需要先注册到VStory中,然后在DSL中使用。这个在[自定义组件](./Custom_Component)中会详细介绍。 -注意的是,组件可以携带一个额外的文本,这个文本通过text属性配置,而graphic属性则是组件本身的配置。 +注意的是,组件可以携带一个额外的文本,这个文本通过`text`属性配置,而`graphic`属性则是组件本身的配置。 ```ts interface IComponentCharacterConfig extends ICharacterConfigBase { options: { @@ -122,7 +122,8 @@ interface IComponentCharacterConfig extends ICharacterConfigBase { 正在开发中 ### Acts数组 -通过characters数组,我们可以在画布中放置多个元素,接下来我们需要通过acts数组来描述这个作品是如何编排的,什么元素在什么时刻做了什么行为。Acts由幕、场景、动作组成。acts数组中可以包含多个幕,幕与幕之间是有先后顺序的串联结构。每一个幕中可以包含多个场景,场景与场景默认是有先后顺序的串联结构。但是场景和场景的时间线是可以重叠的,通过配置场景的delay字段,可以控制该场景与上一个场景时间线的偏移。每一个场景中可以包含多个动作,动作中描述了一个或多个character的具体行为,一个场景中可以包含多个character和多个动作,动作之间是并行执行的,通过配置startTime来控制该动作的开始时间。 +通过`characters`数组,我们可以在画布中放置多个元素,接下来我们需要通过`acts`数组来描述这个作品是如何编排的,什么元素在什么时刻做了什么行为。`acts`由幕、场景、动作组成。 +`acts`数组中可以包含多个幕,幕与幕之间是有先后顺序的串联结构。每一个幕中可以包含多个场景,场景与场景默认是有先后顺序的串联结构。但是场景和场景的时间线是可以重叠的,通过配置场景的`delay`字段,可以控制该场景与上一个场景时间线的偏移。每一个场景中可以包含多个动作,动作中描述了一个或多个`character`的具体行为,一个场景中可以包含多个`character`和多个动作,动作之间是并行执行的,通过配置`startTime`来控制该动作的开始时间。 #### 幕 幕是作品中最大的章节,一个作品可以包含多个幕,幕与幕之间是有先后顺序的串联结构。 @@ -133,7 +134,7 @@ interface IActSpec { } ``` #### 场景 -场景是一个时间线,一个场景包含一个动作数组,场景与场景默认是有先后顺序的串联结构,但也可以通过配置delay字段来控制该场景与上一个场景时间线的偏移。 +场景是一个时间线,一个场景包含一个动作数组,场景与场景默认是有先后顺序的串联结构,但也可以通过配置`delay`字段来控制该场景与上一个场景时间线的偏移。 ```ts type ISceneSpec = { id: string; @@ -142,7 +143,7 @@ type ISceneSpec = { }; ``` #### 动作 -一个动作包含一个或多个character的具体行为,一个场景中可以包含多个动作,动作之间是并行执行的,通过配置startTime来控制该动作的开始时间。 +一个动作包含一个或多个`character`的具体行为,一个场景中可以包含多个动作,动作之间是并行执行的,通过配置`startTime`来控制该动作的开始时间。 ```ts interface IActions { characterId: string | string[]; // 要执行动作的character的id或者数组 @@ -174,4 +175,4 @@ export interface IAnimationParams { } ``` -到这里,一个DSL的完整定义就完成了,大家可以自己动手试一下,或者去example[/vstory/example]里去改一改试一试。 +到这里,一个DSL的完整定义就完成了,大家可以自己动手试一下,或者去[example](/vstory/example)里去改一改试一试。 diff --git a/docs/assets/guide/zh/tutorial_docs/VStory_Concepts/story-player.md b/docs/assets/guide/zh/tutorial_docs/VStory_Concepts/story-player.md index 29a4d017..2765d368 100644 --- a/docs/assets/guide/zh/tutorial_docs/VStory_Concepts/story-player.md +++ b/docs/assets/guide/zh/tutorial_docs/VStory_Concepts/story-player.md @@ -1,6 +1,6 @@ # Story和Player -首先建议大家阅读[dsl]()的章节,了解如何编写一个VStory的DSL描述。当我们有了一个DSL的JSON描述之后,我们就需要进行VStory的实例化,然后使用播放器去播放作品了。 +首先建议大家阅读[dsl](./dsl)的章节,了解如何编写一个VStory的DSL描述。当我们有了一个DSL的JSON描述之后,我们就需要进行VStory的实例化,然后使用播放器去播放作品了。 ## 注册 @@ -40,7 +40,7 @@ story.load(dsl); ## 命令添加character(可选) -如果您的DSL中没有包含character,那么您可以使用命令添加character。如果您已经静态的定义好了DSL,这个步骤就不需要 +如果您的DSL中没有包含`character`,那么您可以使用命令添加`character`。如果您已经静态的定义好了DSL,这个步骤就不需要 ```ts // 接口定义如下 @@ -108,7 +108,7 @@ story.addCharacterWithAppear({ ## 创建Player并绑定Story -创建好Story之后,我们就可以进行播放流程了,我们需要创建一个Player实例,然后绑定Story实例。 +创建好`Story`之后,我们就可以进行播放流程了,我们需要创建一个`Player`实例,然后绑定`Story`实例。 ```ts // 创建Player实例 @@ -116,7 +116,7 @@ const player = new Player(story); // 初始化Story story.init(player); ``` -接下来调用`player.play()`即可播放。play方法接收一个number类型的参数,可传入0,-1,1 +接下来调用`player.play()`即可播放。`play`方法接收一个`number`类型的参数,可传入0,-1,1 传入0表示只播放一次,播放到结尾就停止 传入1表示循环播放,播放到结尾就从头开始播放 传入-1表示不循环也不停止,播放到结尾之后时间线继续往后走,适用于有循环动画的场景,比如有一个持续播放的背景动画 @@ -130,4 +130,4 @@ player.play(1); player.play(-1); ``` -到这里,story和player的定义就介绍完了,大家可以自己动手试一下,或者去example[/vstory/example]里去改一改试一试。 +到这里,`story`和`player`的定义就介绍完了,大家可以自己动手试一下,或者去example[/vstory/example]里去改一改试一试。 diff --git a/docs/assets/guide/zh/tutorial_docs/VStory_Website_Guide.md b/docs/assets/guide/zh/tutorial_docs/VStory_Website_Guide.md index 51dad97f..09ad4838 100644 --- a/docs/assets/guide/zh/tutorial_docs/VStory_Website_Guide.md +++ b/docs/assets/guide/zh/tutorial_docs/VStory_Website_Guide.md @@ -17,9 +17,10 @@ VStory 的文档提供了有关功能和配置的详细信息。根据你的需求,你可以查看以下几个部分: - [教程](./VStory_Website_Guide):介绍了 VStory 的基本概念和各种使用方法。 -- [组件](../../components):提供了 VStory 图表的所有组件配置及其详细说明。 +- [概念](./VStory_Concepts/dsl):提供了 VStory `DSL` 的定义以及核心类的介绍。 +- [扩展](./extend/Custom_Character):提供了自定义扩展的教程和指南。 -另外,为了更好的使用VStory,建议你再了解一下[VChart](/Vchart)、[VTable](/VTable)。 +另外,为了更好的使用VStory,建议你再了解一下[VChart](/Vchart)、[VTable](/VTable)、[VRender](/VRender)。 ## 图表示例 diff --git a/docs/assets/guide/zh/tutorial_docs/extend/Custom_Character.md b/docs/assets/guide/zh/tutorial_docs/extend/Custom_Character.md index c5dba09e..d1c112f2 100644 --- a/docs/assets/guide/zh/tutorial_docs/extend/Custom_Character.md +++ b/docs/assets/guide/zh/tutorial_docs/extend/Custom_Character.md @@ -6,6 +6,8 @@ 我们提供了`@visactor/vstory-external`包,用于方便用户进行自定义Character的开发。一些扩展功能都可以在这个包中实现。下面我们通过一个接入Lottie的例子来介绍如何在这个包中进行扩展。 +![](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory/vstory-external.png) + ## 自定义一个Lottie的Character 如果需要在作品中现在需要展示一个Lottie动画,但是VStory的主包里并没有提供这样的Character。现在我们就需要在`@visactor/vstory-external`包中进行扩展。 @@ -173,3 +175,44 @@ export class LottieVisibilityActionProcessor extends CommonVisibilityActionProce 接下来我们导出`Character`和`Processor`的注册方法即可。 具体的代码大家在`packages/vstory-external/src/character/lottie`和`packages/vstory-external/src/processor/lottie`中可以看到。 + +最终,我们就可以在`DSL`中使用`Lottie`了。 + +```javascript livedemo template=vstory +// 注册所有需要的内容 +VStory.registerAll(); +// 注册Lottie +VStory.registerLottie(); +VStory.registerLottieAction(); + +const story = new VStory.Story(null, { dom: CONTAINER_ID, background: '#ebecf0' }); +const player = new VStory.Player(story); +story.init(player); + +story.addCharacterWithAppear({ + type: 'Lottie', + id: 'lottie-test', + zIndex: 2, + position: { + top: 50, + left: 50, + width: 300, + height: 300 + }, + options: { + graphic: { + data: 'loading1' + }, + panel: { + fill: '#ffffff', + shadowColor: 'rgba(0, 0, 0, 0.05)', + shadowBlur: 10, + shadowOffsetX: 4, + shadowOffsetY: 4 + } + } +}); + +player.play(-1); +window.vstory = story; +``` diff --git a/docs/package.json b/docs/package.json index f26e22c2..35783ea5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@arco-design/web-react": "2.46.1", - "@visactor/vstory": "workspace:0.0.13", + "@visactor/vstory": "workspace:0.0.14", "@visactor/vutils": "~0.18.17", "markdown-it": "^13.0.0", "highlight.js": "^11.8.0", diff --git a/packages/vstory-animate/CHANGELOG.json b/packages/vstory-animate/CHANGELOG.json index 0ca45f2c..e62ef852 100644 --- a/packages/vstory-animate/CHANGELOG.json +++ b/packages/vstory-animate/CHANGELOG.json @@ -1,6 +1,12 @@ { "name": "@visactor/vstory-animate", "entries": [ + { + "version": "0.0.14", + "tag": "@visactor/vstory-animate_v0.0.14", + "date": "Wed, 27 Nov 2024 09:07:10 GMT", + "comments": {} + }, { "version": "0.0.13", "tag": "@visactor/vstory-animate_v0.0.13", diff --git a/packages/vstory-animate/CHANGELOG.md b/packages/vstory-animate/CHANGELOG.md index cc70967a..5fb29084 100644 --- a/packages/vstory-animate/CHANGELOG.md +++ b/packages/vstory-animate/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log - @visactor/vstory-animate -This log was last generated on Mon, 25 Nov 2024 13:17:43 GMT and should not be manually modified. +This log was last generated on Wed, 27 Nov 2024 09:07:10 GMT and should not be manually modified. + +## 0.0.14 +Wed, 27 Nov 2024 09:07:10 GMT + +_Version update only_ ## 0.0.13 Mon, 25 Nov 2024 13:17:43 GMT diff --git a/packages/vstory-animate/package.json b/packages/vstory-animate/package.json index d75486d7..c447bdff 100644 --- a/packages/vstory-animate/package.json +++ b/packages/vstory-animate/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vstory-animate", - "version": "0.0.13", + "version": "0.0.14", "description": "", "sideEffects": true, "main": "cjs/index.js", @@ -34,7 +34,7 @@ "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", "@visactor/vscale": "~0.18.17", - "@visactor/vstory-core": "workspace:0.0.13" + "@visactor/vstory-core": "workspace:0.0.14" }, "devDependencies": { "@internal/bundler": "workspace:*", diff --git a/packages/vstory-core/CHANGELOG.json b/packages/vstory-core/CHANGELOG.json index d2fac07a..9092babc 100644 --- a/packages/vstory-core/CHANGELOG.json +++ b/packages/vstory-core/CHANGELOG.json @@ -1,6 +1,12 @@ { "name": "@visactor/vstory-core", "entries": [ + { + "version": "0.0.14", + "tag": "@visactor/vstory-core_v0.0.14", + "date": "Wed, 27 Nov 2024 09:07:10 GMT", + "comments": {} + }, { "version": "0.0.13", "tag": "@visactor/vstory-core_v0.0.13", diff --git a/packages/vstory-core/CHANGELOG.md b/packages/vstory-core/CHANGELOG.md index 4e47a06a..15d397a3 100644 --- a/packages/vstory-core/CHANGELOG.md +++ b/packages/vstory-core/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log - @visactor/vstory-core -This log was last generated on Mon, 25 Nov 2024 13:17:43 GMT and should not be manually modified. +This log was last generated on Wed, 27 Nov 2024 09:07:10 GMT and should not be manually modified. + +## 0.0.14 +Wed, 27 Nov 2024 09:07:10 GMT + +_Version update only_ ## 0.0.13 Mon, 25 Nov 2024 13:17:43 GMT diff --git a/packages/vstory-core/package.json b/packages/vstory-core/package.json index 1dfa493b..2cb30682 100644 --- a/packages/vstory-core/package.json +++ b/packages/vstory-core/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vstory-core", - "version": "0.0.13", + "version": "0.0.14", "description": "", "sideEffects": true, "main": "cjs/index.js", diff --git a/packages/vstory-editor/CHANGELOG.json b/packages/vstory-editor/CHANGELOG.json index 08a3d01e..d2663155 100644 --- a/packages/vstory-editor/CHANGELOG.json +++ b/packages/vstory-editor/CHANGELOG.json @@ -1,6 +1,12 @@ { "name": "@visactor/vstory-editor", "entries": [ + { + "version": "0.0.14", + "tag": "@visactor/vstory-editor_v0.0.14", + "date": "Wed, 27 Nov 2024 09:07:10 GMT", + "comments": {} + }, { "version": "0.0.13", "tag": "@visactor/vstory-editor_v0.0.13", diff --git a/packages/vstory-editor/CHANGELOG.md b/packages/vstory-editor/CHANGELOG.md index 71ea4359..50d1b536 100644 --- a/packages/vstory-editor/CHANGELOG.md +++ b/packages/vstory-editor/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log - @visactor/vstory-editor -This log was last generated on Mon, 25 Nov 2024 13:17:43 GMT and should not be manually modified. +This log was last generated on Wed, 27 Nov 2024 09:07:10 GMT and should not be manually modified. + +## 0.0.14 +Wed, 27 Nov 2024 09:07:10 GMT + +_Version update only_ ## 0.0.13 Mon, 25 Nov 2024 13:17:43 GMT diff --git a/packages/vstory-editor/package.json b/packages/vstory-editor/package.json index 06e5f025..05b8c9ba 100644 --- a/packages/vstory-editor/package.json +++ b/packages/vstory-editor/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vstory-editor", - "version": "0.0.13", + "version": "0.0.14", "description": "", "sideEffects": true, "main": "cjs/index.js", @@ -34,7 +34,7 @@ "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", "@visactor/vscale": "~0.18.17", - "@visactor/vstory-core": "workspace:0.0.13" + "@visactor/vstory-core": "workspace:0.0.14" }, "devDependencies": { "@internal/bundler": "workspace:*", diff --git a/packages/vstory-external/CHANGELOG.json b/packages/vstory-external/CHANGELOG.json index 6c9348c4..e6fd2dd8 100644 --- a/packages/vstory-external/CHANGELOG.json +++ b/packages/vstory-external/CHANGELOG.json @@ -1,6 +1,12 @@ { "name": "@visactor/vstory-external", "entries": [ + { + "version": "0.0.14", + "tag": "@visactor/vstory-external_v0.0.14", + "date": "Wed, 27 Nov 2024 09:07:10 GMT", + "comments": {} + }, { "version": "0.0.13", "tag": "@visactor/vstory-external_v0.0.13", diff --git a/packages/vstory-external/CHANGELOG.md b/packages/vstory-external/CHANGELOG.md index ae016d89..a9305fa4 100644 --- a/packages/vstory-external/CHANGELOG.md +++ b/packages/vstory-external/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log - @visactor/vstory-external -This log was last generated on Mon, 25 Nov 2024 13:17:43 GMT and should not be manually modified. +This log was last generated on Wed, 27 Nov 2024 09:07:10 GMT and should not be manually modified. + +## 0.0.14 +Wed, 27 Nov 2024 09:07:10 GMT + +_Version update only_ ## 0.0.13 Mon, 25 Nov 2024 13:17:43 GMT diff --git a/packages/vstory-external/package.json b/packages/vstory-external/package.json index 6f038eb0..63d5859b 100644 --- a/packages/vstory-external/package.json +++ b/packages/vstory-external/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vstory-external", - "version": "0.0.13", + "version": "0.0.14", "description": "", "sideEffects": true, "main": "cjs/index.js", @@ -34,9 +34,9 @@ "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", "@visactor/vscale": "~0.18.17", - "@visactor/vstory-core": "workspace:0.0.13", - "@visactor/vstory-animate": "workspace:0.0.13", - "@visactor/vstory-player": "workspace:0.0.13" + "@visactor/vstory-core": "workspace:0.0.14", + "@visactor/vstory-animate": "workspace:0.0.14", + "@visactor/vstory-player": "workspace:0.0.14" }, "devDependencies": { "@internal/bundler": "workspace:*", diff --git a/packages/vstory-player/CHANGELOG.json b/packages/vstory-player/CHANGELOG.json index 2c0b1fbe..f209f5ce 100644 --- a/packages/vstory-player/CHANGELOG.json +++ b/packages/vstory-player/CHANGELOG.json @@ -1,6 +1,12 @@ { "name": "@visactor/vstory-player", "entries": [ + { + "version": "0.0.14", + "tag": "@visactor/vstory-player_v0.0.14", + "date": "Wed, 27 Nov 2024 09:07:10 GMT", + "comments": {} + }, { "version": "0.0.13", "tag": "@visactor/vstory-player_v0.0.13", diff --git a/packages/vstory-player/CHANGELOG.md b/packages/vstory-player/CHANGELOG.md index 23074668..9690b05b 100644 --- a/packages/vstory-player/CHANGELOG.md +++ b/packages/vstory-player/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log - @visactor/vstory-player -This log was last generated on Mon, 25 Nov 2024 13:17:43 GMT and should not be manually modified. +This log was last generated on Wed, 27 Nov 2024 09:07:10 GMT and should not be manually modified. + +## 0.0.14 +Wed, 27 Nov 2024 09:07:10 GMT + +_Version update only_ ## 0.0.13 Mon, 25 Nov 2024 13:17:43 GMT diff --git a/packages/vstory-player/package.json b/packages/vstory-player/package.json index 100dc0d8..3bb3c283 100644 --- a/packages/vstory-player/package.json +++ b/packages/vstory-player/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vstory-player", - "version": "0.0.13", + "version": "0.0.14", "description": "", "sideEffects": true, "main": "cjs/index.js", @@ -34,8 +34,8 @@ "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", "@visactor/vscale": "~0.18.17", - "@visactor/vstory-core": "workspace:0.0.13", - "@visactor/vstory-animate": "workspace:0.0.13" + "@visactor/vstory-core": "workspace:0.0.14", + "@visactor/vstory-animate": "workspace:0.0.14" }, "devDependencies": { "@internal/bundler": "workspace:*", diff --git a/packages/vstory-templates/CHANGELOG.json b/packages/vstory-templates/CHANGELOG.json index 5100fce3..d3233066 100644 --- a/packages/vstory-templates/CHANGELOG.json +++ b/packages/vstory-templates/CHANGELOG.json @@ -1,6 +1,12 @@ { "name": "@visactor/vstory-templates", "entries": [ + { + "version": "0.0.14", + "tag": "@visactor/vstory-templates_v0.0.14", + "date": "Wed, 27 Nov 2024 09:07:10 GMT", + "comments": {} + }, { "version": "0.0.13", "tag": "@visactor/vstory-templates_v0.0.13", diff --git a/packages/vstory-templates/CHANGELOG.md b/packages/vstory-templates/CHANGELOG.md index 5cfbdafb..8d79f03b 100644 --- a/packages/vstory-templates/CHANGELOG.md +++ b/packages/vstory-templates/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log - @visactor/vstory-templates -This log was last generated on Mon, 25 Nov 2024 13:17:43 GMT and should not be manually modified. +This log was last generated on Wed, 27 Nov 2024 09:07:10 GMT and should not be manually modified. + +## 0.0.14 +Wed, 27 Nov 2024 09:07:10 GMT + +_Version update only_ ## 0.0.13 Mon, 25 Nov 2024 13:17:43 GMT diff --git a/packages/vstory-templates/package.json b/packages/vstory-templates/package.json index a509c6d3..a3bdd6f2 100644 --- a/packages/vstory-templates/package.json +++ b/packages/vstory-templates/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vstory-templates", - "version": "0.0.13", + "version": "0.0.14", "description": "", "sideEffects": true, "main": "cjs/index.js", @@ -34,7 +34,7 @@ "@visactor/vchart-extension": "0.0.3-vstory.2", "@visactor/vdataset": "~0.18.17", "@visactor/vscale": "~0.18.17", - "@visactor/vstory-core": "workspace:0.0.13" + "@visactor/vstory-core": "workspace:0.0.14" }, "devDependencies": { "@internal/bundler": "workspace:*", diff --git a/packages/vstory/CHANGELOG.json b/packages/vstory/CHANGELOG.json index 7cb85ac9..147cedd9 100644 --- a/packages/vstory/CHANGELOG.json +++ b/packages/vstory/CHANGELOG.json @@ -1,6 +1,12 @@ { "name": "@visactor/vstory", "entries": [ + { + "version": "0.0.14", + "tag": "@visactor/vstory_v0.0.14", + "date": "Wed, 27 Nov 2024 09:07:10 GMT", + "comments": {} + }, { "version": "0.0.13", "tag": "@visactor/vstory_v0.0.13", diff --git a/packages/vstory/CHANGELOG.md b/packages/vstory/CHANGELOG.md index 5d9af9ed..3c8b6e7d 100644 --- a/packages/vstory/CHANGELOG.md +++ b/packages/vstory/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log - @visactor/vstory -This log was last generated on Mon, 25 Nov 2024 13:17:43 GMT and should not be manually modified. +This log was last generated on Wed, 27 Nov 2024 09:07:10 GMT and should not be manually modified. + +## 0.0.14 +Wed, 27 Nov 2024 09:07:10 GMT + +_Version update only_ ## 0.0.13 Mon, 25 Nov 2024 13:17:43 GMT diff --git a/packages/vstory/package.json b/packages/vstory/package.json index d00654ca..d0a94550 100644 --- a/packages/vstory/package.json +++ b/packages/vstory/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vstory", - "version": "0.0.13", + "version": "0.0.14", "description": "", "sideEffects": true, "main": "cjs/index.js", @@ -24,11 +24,12 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vstory-core": "workspace:0.0.13", - "@visactor/vstory-animate": "workspace:0.0.13", - "@visactor/vstory-editor": "workspace:0.0.13", - "@visactor/vstory-player": "workspace:0.0.13", - "@visactor/vstory-templates": "workspace:0.0.13" + "@visactor/vstory-core": "workspace:0.0.14", + "@visactor/vstory-animate": "workspace:0.0.14", + "@visactor/vstory-editor": "workspace:0.0.14", + "@visactor/vstory-player": "workspace:0.0.14", + "@visactor/vstory-templates": "workspace:0.0.14", + "@visactor/vstory-external": "workspace:0.0.14" }, "devDependencies": { "@internal/bundler": "workspace:*", diff --git a/packages/vstory/src/index.ts b/packages/vstory/src/index.ts index f6280543..bc0fe386 100644 --- a/packages/vstory/src/index.ts +++ b/packages/vstory/src/index.ts @@ -4,6 +4,7 @@ import { registerCommonBounceAction, registerVChartAction, registerVComponentAct export * from '@visactor/vstory-core'; export * from '@visactor/vstory-player'; export * from '@visactor/vstory-templates'; +export * from '@visactor/vstory-external'; export function registerAll() { registerGraphics(); diff --git a/tools/bugserver-trigger/package.json b/tools/bugserver-trigger/package.json index 545c48ee..837be2e7 100644 --- a/tools/bugserver-trigger/package.json +++ b/tools/bugserver-trigger/package.json @@ -8,7 +8,7 @@ "ci": "ts-node --transpileOnly --skipProject ./scripts/trigger-test.ts" }, "dependencies": { - "@visactor/vstory": "workspace:0.0.13" + "@visactor/vstory": "workspace:0.0.14" }, "devDependencies": { "@rushstack/eslint-patch": "~1.1.4",