diff --git a/packages/vstory-core/src/character/chart/character-chart.ts b/packages/vstory-core/src/character/chart/character-chart.ts index ea615548..ed413c92 100644 --- a/packages/vstory-core/src/character/chart/character-chart.ts +++ b/packages/vstory-core/src/character/chart/character-chart.ts @@ -125,6 +125,7 @@ export class CharacterChart panel: {}, ticker: this._ticker, zIndex: this._config.zIndex ?? 0, + vchartBoundsMode: this._config.options.initOption?.vchartBoundsMode ?? 'auto', chartInitOptions: mergeChartOption( { performanceHook: { diff --git a/packages/vstory-core/src/character/chart/graphic/vchart-graphic-render.ts b/packages/vstory-core/src/character/chart/graphic/vchart-graphic-render.ts index 29326b59..9d228786 100644 --- a/packages/vstory-core/src/character/chart/graphic/vchart-graphic-render.ts +++ b/packages/vstory-core/src/character/chart/graphic/vchart-graphic-render.ts @@ -52,6 +52,8 @@ export class VChartRender extends DefaultCanvasRectRender implements IGraphicRen // @ts-ignore vchartStage._editor_needRender = true; const matrix = chart.globalTransMatrix.clone(); + // auto 模式下，需要将vchart.stage的viewBoxTransform 设置到包含偏移量的位置 + matrix.translate(chart.vchartAutoTranslate.x, chart.vchartAutoTranslate.y); const stageMatrix = chart.stage.window.getViewBoxTransform().clone(); stageMatrix.multiply(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f); vchartStage.window.setViewBoxTransform( diff --git a/packages/vstory-core/src/character/chart/graphic/vchart-graphic.ts b/packages/vstory-core/src/character/chart/graphic/vchart-graphic.ts index 9457e12f..41fa88bd 100644 --- a/packages/vstory-core/src/character/chart/graphic/vchart-graphic.ts +++ b/packages/vstory-core/src/character/chart/graphic/vchart-graphic.ts @@ -1,10 +1,11 @@ -import type { IInitOption, ISpec, IVChart } from '@visactor/vchart'; +import type { IInitOption, IVChart } from '@visactor/vchart'; import VChart from '@visactor/vchart'; -import type { GraphicType, IRectGraphicAttribute, ITicker } from '@visactor/vrender-core'; -import { genNumberType, IGraphicAttribute, Rect } from '@visactor/vrender-core'; -import type { IBoundsLike } from '@visactor/vutils'; -import { pointInAABB } from '@visactor/vutils'; +import type { GraphicType, IGraphic, IGroup, IRectGraphicAttribute, ITicker } from '@visactor/vrender-core'; +import { genNumberType, parsePadding, Rect } from '@visactor/vrender-core'; +import type { IAABBBounds, IBoundsLike } from '@visactor/vutils'; +import { Bounds, pointInAABB, transformBoundsWithMatrix } from '@visactor/vutils'; import { mergeChartOption } from '../../../utils/chart'; +import { isBoundsLikeEqual } from '../../../utils/equal'; export interface IChartGraphicAttribute { renderCanvas: HTMLCanvasElement; @@ -31,6 +32,7 @@ export interface IChartGraphicAttribute { anchor?: [number, number]; zIndex?: number; panel?: Partial; + vchartBoundsMode?: 'clip' | 'auto'; } export const CHART_NUMBER_TYPE = genNumberType(); @@ -43,8 +45,38 @@ export class VChartGraphic extends Rect { get vchart() { return this._vchart; } + // vchart 的实际绘图绘制位置 + // 首先 vchart.stage 会根据 stage.window.viewBoxTransform 变换第一次，这一次变化包括了 + // 1. 全局stage的缩放；2. vchart-graphic 的位置定位；3. auto 模式下的自动偏移（这个等同于位置偏移） + // 然后 vchart.stage.defaultLayer 会根据偏移量，将图表绘制内容再偏移回来 + // 来回2次偏移的目的是，让 vchart 内容超出原是viewBox的部分，可以正常被viewBox包含并绘制 + protected _vchartAutoTranslate: { x: number; y: number } = { x: 0, y: 0 }; + get vchartAutoTranslate() { + return this._vchartAutoTranslate; + } + + // 实际渲染图表内容的 bounds + // 只在 auto 模式下生效 + protected _displayBounds: Bounds; - protected _boundsChangeTag: boolean = true; + doUpdateAABBBounds(full?: boolean): IAABBBounds { + if (!this._displayBounds) { + return super.doUpdateAABBBounds(full); + } + this.updateAABBBoundsStamp++; + const graphicTheme = this.getGraphicTheme(); + const bounds = this._displayBounds.clone(); + transformBoundsWithMatrix(bounds, bounds, this.transMatrix); + // @ts-ignore + const { boundsPadding = graphicTheme.boundsPadding } = this.attribute; + const paddingArray = parsePadding(boundsPadding); + if (paddingArray) { + bounds.expand(paddingArray as number); + } + this.clearUpdateBoundTag(); + this._AABBBounds.copy(bounds); + return bounds; + } constructor(params: IChartGraphicAttribute) { const { panel, zIndex } = params; @@ -62,8 +94,11 @@ export class VChartGraphic extends Rect { disableDirtyBounds, ticker, chartInitOptions, - viewBox + viewBox, + vchartBoundsMode } = params; + this.attribute.viewBox = viewBox; + this.attribute.vchartBoundsMode = vchartBoundsMode; this._vchart = new VChart( spec, mergeChartOption( @@ -111,6 +146,11 @@ export class VChartGraphic extends Rect { // stage.pauseTriggerEvent(); } stage.resumeRender(); + + if (vchartBoundsMode === 'auto') { + // auto 模式下，需要手动更新一下 + this.updateVChartGraphicViewBoxInAuto(); + } } /** @@ -128,4 +168,117 @@ export class VChartGraphic extends Rect { this._vchart && this._vchart.release(); super.release(); } + + setAttribute(key: string, value: any) { + if (key === 'viewBox') { + super.setAttribute('x', value.x1); + super.setAttribute('y', value.y1); + this.updateVChartGraphicViewBox(value); + } else { + super.setAttribute(key, value); + } + } + setAttributes(attrs: IChartGraphicAttribute) { + const lastedViewBox = this.attribute.viewBox; + super.setAttributes(attrs); + if (attrs.viewBox) { + this.attribute.viewBox = lastedViewBox; + this.updateVChartGraphicViewBox(attrs.viewBox); + } + } + + private _getVChartGroupActualBounds(bounds: Bounds, _group: IGraphic) { + if (_group.type !== 'group') { + bounds.union(_group.globalAABBBounds); + return; + } + // 以下是 group 的情况 + const group = _group as IGroup; + if (group.childrenCount === 0) { + return; + } + if (group.name?.startsWith('seriesGroup_')) { + return bounds.union(group.globalAABBBounds); + } + if (group.attribute.clip === true && (group.attribute.width || group.attribute.height)) { + bounds.union(group.globalAABBBounds); + return; + } + group.forEachChildren(_child => { + this._getVChartGroupActualBounds(bounds, _child as IGraphic); + }); + } + + /** + * 获取 VChart 图形的实际边界。 + * 该方法通过遍历 VChart stage的默认图层中的所有子组，计算并返回它们的边界框。 + * + * @returns {Bounds} 返回包含所有子组边界的 Bounds 对象。 + */ + getVChartActualBounds() { + const stage = this._vchart.getStage(); + // const layer = stage.defaultLayer; + const root = stage.defaultLayer.getChildByName('root') as IGroup; + const bounds = new Bounds(); + root.forEachChildren((child: IGroup) => { + this._getVChartGroupActualBounds(bounds, child); + }); + + bounds.translate(-(stage.defaultLayer.attribute.x ?? 0), -(stage.defaultLayer.attribute.y ?? 0)); + return bounds; + } + + updateVChartGraphicViewBox(bounds: IBoundsLike) { + if (this.attribute.viewBox && isBoundsLikeEqual(this.attribute.viewBox, bounds)) { + // 没有变化，不需要更新 + return; + } + // 先更新 viewBox + this.attribute.viewBox = bounds; + // 不是auto模式 + if (this.attribute.vchartBoundsMode !== 'auto') { + // 直接更新 + this._vchart.updateViewBox(bounds); + return; + } + this.updateVChartGraphicViewBoxInAuto(); + } + + updateVChartGraphicViewBoxInAuto() { + // 1. 得到当前设置 viewBox 的实际渲染bounds + const rect = this._vchart.getChart().getCanvasRect(); + const viewBoxSize = { + width: this.attribute.viewBox.x2 - this.attribute.viewBox.x1, + height: this.attribute.viewBox.y2 - this.attribute.viewBox.y1 + }; + // 当尺寸变化时，进行一次 resize + if (rect.width !== viewBoxSize.width || rect.height !== viewBoxSize.height) { + // vchart 使用当前的设置 viewBox 进行 resize + // 这里的 resize 不期望修改viewBox + // 但是 vchart 内 viewBox 优先级更高，所以这里的实现有点hack。 + // @ts-ignore + this.vchart._viewBox = this.attribute.viewBox; + // @ts-ignore + this.vchart._option.viewBox = this.attribute.viewBox; + // @ts-ignore + this.vchart.getChart()._option.viewBox = this.attribute.viewBox; + this.vchart.resize(viewBoxSize.width, viewBoxSize.height); + } + const rootBounds = this.getVChartActualBounds(); + // 2. 得到需要绘制全部内容时的 vchart 的 viewBox + // 不要小于设置viewBox; + rootBounds.union(this.attribute.viewBox); + // 当前实际绘图内容的 bounds + this._displayBounds = rootBounds.clone(); + // 3. 考虑到 vchart 可能会将内容绘制到 -x, -y，记录下这个偏移量 + this._vchartAutoTranslate.x = rootBounds.x1 < 0 ? rootBounds.x1 : 0; + this._vchartAutoTranslate.y = rootBounds.y1 < 0 ? rootBounds.y1 : 0; + // 4. 将 bounds 标准化到 0, 0, width, height + rootBounds.translate(-this._vchartAutoTranslate.x, -this._vchartAutoTranslate.y); + // 5. 将绘图 viewBox 更新到 vchart.stage + // 注意不要更新到 vchart，更新到vchart会触发vchart重新布局，但是我们不需要vchart按照 viewBox_display 重新布局 + this._vchart.getStage().defaultLayer.translateTo(-this.vchartAutoTranslate.x, -this.vchartAutoTranslate.y); + // @ts-ignore + this._vchart._compiler._view.renderer.setViewBox(rootBounds, true); + } } diff --git a/packages/vstory-core/src/interface/dsl/chart.ts b/packages/vstory-core/src/interface/dsl/chart.ts index 9c96a5e7..9d8f3801 100644 --- a/packages/vstory-core/src/interface/dsl/chart.ts +++ b/packages/vstory-core/src/interface/dsl/chart.ts @@ -39,12 +39,16 @@ export interface IDataGroupStyle { }; } +export interface IChartCharacterInitOption { + vchartBoundsMode?: 'clip' | 'auto'; +} + export interface IChartCharacterConfig extends ICharacterConfigBase { options: { // 图表spec spec?: any; // 初始化参数 - initOption?: IInitOption; + initOption?: IInitOption & IChartCharacterInitOption; // 边距 padding?: { left: number; top: number; right: number; bottom: number }; // 图表容器 diff --git a/packages/vstory-core/src/utils/equal.ts b/packages/vstory-core/src/utils/equal.ts index ba1c3d4f..b0c14c59 100644 --- a/packages/vstory-core/src/utils/equal.ts +++ b/packages/vstory-core/src/utils/equal.ts @@ -1,6 +1,7 @@ // Adapted from https://github.com/antvis/F2/blob/master/packages/f2/src/base/equal.ts by zengyue // License: https://github.com/antvis/F2/blob/master/packages/f2/LICENSE +import type { IBoundsLike } from '@visactor/vutils'; import { isArray, isPlainObject } from '@visactor/vutils'; /** @@ -72,3 +73,7 @@ export function getDiffedParams(from: any, to: any): any { } return obj; } + +export function isBoundsLikeEqual(a: IBoundsLike, b: IBoundsLike) { + return a.x1 === b.x1 && a.x2 === b.x2 && a.y1 === b.y1 && a.y2 === b.y2; +} diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx index e63ff13d..f17a4d7b 100644 --- a/packages/vstory/demo/src/App.tsx +++ b/packages/vstory/demo/src/App.tsx @@ -22,6 +22,8 @@ import { VScreen } from './demos/works/vscreen'; import { Lottie } from './demos/component/lottie'; import { Infographic } from './demos/infographic/infographic'; +import { BaseChart } from './demos/vchart-editor/base-chart'; + type MenusType = ( | { name: string; @@ -152,6 +154,15 @@ const App = () => { component: Infographic } ] + }, + { + name: 'VChart Editor', + subMenus: [ + { + name: 'Base Chart', + component: BaseChart + } + ] } ]; const getSelectedMenu = useCallback<(menus: MenusType) => any>( diff --git a/packages/vstory/demo/src/demos/vchart-editor/base-chart.tsx b/packages/vstory/demo/src/demos/vchart-editor/base-chart.tsx new file mode 100644 index 00000000..ab3d4f50 --- /dev/null +++ b/packages/vstory/demo/src/demos/vchart-editor/base-chart.tsx @@ -0,0 +1,664 @@ +import React, { useEffect } from 'react'; +import { Player, Story, initVR, registerGraphics, registerCharacters } from '../../../../../vstory-core/src'; +import { registerVComponentAction, registerVChartAction } from '../../../../../vstory-player/src'; +import { merge } from '@visactor/vutils'; + +registerGraphics(); +registerCharacters(); +registerVChartAction(); +registerVComponentAction(); +initVR(); + +async function loadDSL() { + const rankingBarSpec = { + direction: 'vertical', + type: 'common', + color: ['#00295C', '#2568BD', '#9F9F9F', '#C5C5C5', '#00B0F0', '#4BCFFF', '#C2C2C2', '#D7D7D7'], + series: [ + { + type: 'bar', + stack: true, + direction: 'vertical', + bar: { + style: { + stroke: '', + lineWidth: 1 + }, + state: { + hover: { + stroke: '#000', + lineWidth: 1 + } + } + }, + barBackground: { + style: { + stroke: '', + lineWidth: 1 + } + }, + label: { + visible: true, + position: 'inside', + style: { + lineHeight: '100%', + fontSize: 16, + fontWeight: 'bold' + }, + overlap: { + strategy: [] + }, + smartInvert: true, + formatConfig: {}, + interactive: true + }, + totalLabel: { + visible: true, + position: 'top', + overlap: false, + clampForce: false, + formatConfig: { + fixed: 0, + content: 'value' + }, + style: { + lineHeight: '100%', + lineWidth: 1, + fill: '#1F2329', + stroke: '#ffffff', + fontSize: 16, + fontWeight: 'bold' + }, + interactive: true + }, + seriesLabel: { + visible: true, + position: 'end', + label: { + style: { + lineHeight: '100%', + lineWidth: 1, + stroke: '#ffffff', + fontSize: 16, + fontWeight: 'bold' + }, + space: 10 + } + }, + xField: '_editor_dimension_field', + yField: '_editor_value_field', + dataId: '0', + id: 'series-0', + EDITOR_SERIES_DATA_KEY: 'a', + seriesField: '_editor_type_field' + }, + { + type: 'bar', + stack: true, + direction: 'vertical', + bar: { + style: { + stroke: '', + lineWidth: 1 + }, + state: { + hover: { + stroke: '#000', + lineWidth: 1 + } + } + }, + barBackground: { + style: { + stroke: '', + lineWidth: 1 + } + }, + label: { + visible: true, + position: 'inside', + style: { + lineHeight: '100%', + fontSize: 16, + fontWeight: 'bold' + }, + overlap: { + strategy: [] + }, + smartInvert: true, + formatConfig: {}, + interactive: true + }, + totalLabel: { + visible: true, + position: 'top', + overlap: false, + clampForce: false, + formatConfig: { + fixed: 0, + content: 'value' + }, + style: { + lineHeight: '100%', + lineWidth: 1, + fill: '#1F2329', + stroke: '#ffffff', + fontSize: 16, + fontWeight: 'bold' + }, + interactive: true + }, + seriesLabel: { + visible: true, + position: 'end', + label: { + style: { + lineHeight: '100%', + lineWidth: 1, + stroke: '#ffffff', + fontSize: 16, + fontWeight: 'bold' + }, + space: 10 + } + }, + xField: '_editor_dimension_field', + yField: '_editor_value_field', + dataId: '1', + id: 'series-1', + EDITOR_SERIES_DATA_KEY: 'b', + seriesField: '_editor_type_field' + } + ], + legends: { + id: 'legend-discrete', + visible: false, + autoPage: false, + position: 'start', + interactive: false, + item: { + label: { + style: { + fill: '#1F2329', + fontSize: 16 + } + } + }, + _originalVisible: false + }, + region: [ + { + id: 'region-0' + } + ], + tooltip: { + visible: true, + mark: { + content: [{}], + title: {} + }, + dimension: { + content: [{}], + title: {} + } + }, + axes: [ + { + orient: 'left', + id: 'axis-left', + type: 'linear', + label: { + autoLimit: false, + style: { + fill: '#1F2329', + fontSize: 16 + }, + formatConfig: {} + }, + domainLine: { + visible: true, + style: { + stroke: '#000000' + } + }, + tick: { + visible: true, + style: { + stroke: '#000000' + } + }, + grid: { + visible: false, + style: { + stroke: '#bbbfc4' + } + }, + autoIndent: false, + maxWidth: null, + maxHeight: null + }, + { + orient: 'bottom', + id: 'axis-bottom', + type: 'band', + label: { + autoLimit: false, + style: { + fill: '#1F2329', + fontSize: 16 + }, + formatConfig: {} + }, + domainLine: { + visible: true, + style: { + stroke: '#000000' + }, + onZero: true + }, + tick: { + visible: true, + style: { + stroke: '#000000' + } + }, + grid: { + visible: false, + style: { + stroke: '#bbbfc4' + } + }, + autoIndent: false, + maxWidth: null, + maxHeight: null, + trimPadding: false, + paddingInner: [0.2, 0], + paddingOuter: [0.2, 0] + } + ], + data: [ + { + id: '0', + sourceKey: 'a', + values: [ + { + _editor_dimension_field: 'x1', + _editor_value_field: 20, + _editor_type_field: 'a' + }, + { + _editor_dimension_field: 'x2', + _editor_value_field: 23, + _editor_type_field: 'a' + }, + { + _editor_dimension_field: 'x3', + _editor_value_field: 26, + _editor_type_field: 'a' + } + ], + specField: { + _editor_dimension_field: { + type: 'dimension', + order: 0 + }, + _editor_type_field: { + type: 'series', + order: 0 + }, + _editor_value_field: { + type: 'value', + order: 0 + } + } + }, + { + id: '1', + sourceKey: 'b', + values: [ + { + _editor_dimension_field: 'x1', + _editor_value_field: 20, + _editor_type_field: 'b' + }, + { + _editor_dimension_field: 'x2', + _editor_value_field: 24, + _editor_type_field: 'b' + }, + { + _editor_dimension_field: 'x3', + _editor_value_field: 29, + _editor_type_field: 'b' + } + ], + specField: { + _editor_dimension_field: { + type: 'dimension', + order: 0 + }, + _editor_type_field: { + type: 'series', + order: 0 + }, + _editor_value_field: { + type: 'value', + order: 0 + } + } + } + ], + markLine: [ + { + id: 'e3a46901-3fef-460a-abec-bf339ae73e96', + interactive: true, + name: 'total-diff-line', + type: 'type-step', + coordinates: [ + { + _editor_dimension_field: 'x1', + _editor_value_field: 40, + _editor_type_field: 'b', + refRelativeSeriesId: 'series-1' + }, + { + _editor_dimension_field: 'x2', + _editor_value_field: 47, + _editor_type_field: 'b', + refRelativeSeriesId: 'series-1' + } + ], + connectDirection: 'top', + expandDistance: '10.273972602739725%', + line: { + style: { + stroke: '#000', + lineWidth: 1, + pickStrokeBuffer: 10, + lineDash: [0], + cornerRadius: 4 + } + }, + label: { + position: 'middle', + text: '+18%', + labelBackground: { + style: { + fill: '#fff', + fillOpacity: 1, + stroke: '#000', + lineWidth: 1, + cornerRadius: 4 + } + }, + style: { + fill: '#1F2329', + fontSize: 16, + fontWeight: 'bold' + }, + pickable: true, + childrenPickable: false + }, + endSymbol: { + size: 12, + originSymbolType: 'arrow', + style: { + fill: false, + lineWidth: 1, + stroke: '#000', + color: '#000' + }, + symbolType: '', + refX: 0 + }, + _originValue_: [40, 47], + zIndex: 510, + coordinatesOffset: [ + { + x: 0, + y: -26 + }, + { + x: 0, + y: -26 + } + ] + }, + { + id: 'be65e8ee-26c8-4c99-aa0f-33171ba5458e', + interactive: true, + name: 'growth-line', + coordinates: [ + { + _editor_dimension_field: 'x2', + _editor_value_field: 47, + _editor_type_field: 'b', + refRelativeSeriesId: 'series-1' + }, + { + _editor_dimension_field: 'x3', + _editor_value_field: 55, + _editor_type_field: 'b', + refRelativeSeriesId: 'series-1' + } + ], + line: { + style: { + stroke: '#000', + lineWidth: 1, + pickStrokeBuffer: 10, + lineDash: [0] + } + }, + label: { + position: 'middle', + text: '+17%', + labelBackground: { + style: { + fill: '#fff', + fillOpacity: 1, + stroke: '#000', + lineWidth: 1, + cornerRadius: 4 + }, + padding: { + top: 2, + bottom: 2, + right: 4, + left: 4 + } + }, + style: { + fill: '#1F2329', + fontSize: 16, + fontWeight: 'bold', + fontStyle: 'normal' + }, + pickable: true, + childrenPickable: false + }, + endSymbol: { + size: 12, + originSymbolType: 'arrow', + style: { + fill: false, + lineWidth: 1, + stroke: '#000', + color: '#000' + }, + visible: true, + symbolType: '', + refX: 0 + }, + coordinatesOffset: [ + { + x: 0, + y: '-30%' + }, + { + x: 0, + y: '-30%' + } + ], + _originValue_: [47, 55], + zIndex: 510, + startSymbol: { + visible: false, + symbolType: 'triangle', + size: 10, + style: { + fill: '#606773', + stroke: null, + lineWidth: 0 + } + }, + expression: null + } + ], + markArea: [], + labelLayout: 'region', + customMark: [ + { + type: 'component', + componentType: 'seriesLabel', + interactive: false, + style: { + id: 'bd5120c8-bad8-4163-a913-6fe6b67a9c00', + position: 'end', + label: { + space: 10, + style: { + lineHeight: '100%', + lineWidth: 1, + stroke: '#ffffff', + fontSize: 16, + fontWeight: 'bold' + } + } + } + } + ] + }; + return { + characters: [ + { + type: 'VChart', + id: 'chart0', + zIndex: 10, + position: { + top: 50, + left: 0, + width: 400, + height: 200 + }, + options: { + spec: rankingBarSpec, + initOption: { + interactive: true, + animation: false, + disableTriggerEvent: true, + disableDirtyBounds: true + } + } + }, + { + type: 'VChart', + id: 'chart1', + zIndex: 1, + position: { + top: 150, + left: 200, + width: 400, + height: 200 + }, + options: { + spec: rankingBarSpec, + initOption: { + vchartBoundsMode: 'auto', + + interactive: true, + animation: false, + disableTriggerEvent: false, + disableDirtyBounds: true + } + } + } + ], + acts: [ + { + id: 'defaultAct', + scenes: [ + { + id: 'defaultScene', + actions: [ + { + characterId: ['chart0', 'chart1'], + characterActions: [ + { + action: 'appear' + } + ] + } + ] + } + ] + } + ] + }; +} + +export const BaseChart = () => { + const id = 'BaseChart'; + + useEffect(() => { + const container = document.getElementById(id); + const canvas = document.createElement('canvas'); + container?.appendChild(canvas); + + const story = new Story(null, { canvas, width: 800, height: 500, background: 'pink' }); + const player = new Player(story); + story.init(player); + // @ts-ignore + window.story = story; + // @ts-ignore + window.player = player; + loadDSL().then(dsl => { + story.load(dsl); + player.play(-1); + + const chart1 = story.getCharacterById('chart1'); + + // setTimeout(() => { + // chart1?.setConfig( + // merge(chart1?.config, { + // position: { + // top: 100, + // left: 200, + // width: 400, + // height: 300 + // } + // }) + // ); + // }, 1000); + + // setTimeout(() => { + // chart1?.setConfig( + // merge(chart1?.config, { + // position: { + // top: 150, + // left: 200, + // width: 300, + // height: 200 + // } + // }) + // ); + // }, 2000); + }); + + return () => { + story.release(); + }; + }, []); + + return
; +}; diff --git a/packages/vstory/demo/src/demos/works/website/VChartSite.tsx b/packages/vstory/demo/src/demos/works/website/VChartSite.tsx index 3effeb6a..a86ef71a 100644 --- a/packages/vstory/demo/src/demos/works/website/VChartSite.tsx +++ b/packages/vstory/demo/src/demos/works/website/VChartSite.tsx @@ -44,8 +44,8 @@ export const VChartSiteDemo = () => { { id: 'default-chapter', scenes: [ - // scene1, - // scene2, + scene1, + scene2, scene3, scene4, scene5,