feat: add arrange demo, support line growPoint animate

VisActor · Dec 24, 2024 · 13135be · 13135be
1 parent e90489c
commit 13135be
Show file tree

Hide file tree

Showing 23 changed files with 592 additions and 11 deletions.
diff --git a/common/changes/@visactor/vstory-animate/feat-arrange_2024-12-24-12-59.json b/common/changes/@visactor/vstory-animate/feat-arrange_2024-12-24-12-59.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vstory-animate",
+      "comment": "feat: add arrange demo, support line growPoint animate",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vstory-animate"
+}
diff --git a/common/changes/@visactor/vstory-core/feat-arrange_2024-12-24-12-59.json b/common/changes/@visactor/vstory-core/feat-arrange_2024-12-24-12-59.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vstory-core",
+      "comment": "feat: add arrange demo, support line growPoint animate",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vstory-core"
+}
diff --git a/packages/vstory-core/src/core/canvas.ts b/packages/vstory-core/src/core/canvas.ts
@@ -40,6 +40,7 @@ export class StoryCanvas implements IStoryCanvas {
   ) {
     this._story = story;
     this._container = params.container;
+    this._canvas = params.canvas as any;
 
     const {
       canvas,
@@ -127,8 +128,16 @@ export class StoryCanvas implements IStoryCanvas {
       if (!Number.isFinite(width) || !Number.isFinite(height)) {
         scaleX = scaleY = 1;
       } else {
-        const clipWidth = this._container ? this._container.clientWidth : this._canvas.width / this.getDpr();
-        const clipHeight = this._container ? this._container.clientHeight : this._canvas.height / this.getDpr();
+        const clipWidth = this._container
+          ? this._container.clientWidth
+          : this._canvas?.width / vglobal.devicePixelRatio;
+        const clipHeight = this._container
+          ? this._container.clientHeight
+          : this._canvas?.height / vglobal.devicePixelRatio;
+        if (!isValidNumber(clipWidth) || !isValidNumber(clipHeight)) {
+          scaleX = scaleY = 1;
+          return { scaleX, scaleY, width, height };
+        }
 
         const clipAspectRatio = clipWidth / clipHeight;
         const contentAspectRatio = width / height;

diff --git a/...ges/vstory-player/src/processor/chart/transformFunc/seriesmark/transformLineVisibility.ts b/...ges/vstory-player/src/processor/chart/transformFunc/seriesmark/transformLineVisibility.ts
@@ -1,6 +1,35 @@
 import type VChart from '@visactor/vchart';
 import { commonFade, commonGrow } from './commonTransformMarkAppear';
 import type { IChartVisibilityPayload } from '../../interface';
+import type { ICharacter } from '@visactor/vstory-core';
+import { getCustomParams } from './utils';
+
+export const growPoints = (
+  instance: VChart,
+  animation: IChartVisibilityPayload['animation'],
+  option: { markIndex: number; disappear: boolean; character?: ICharacter }
+) => {
+  const { duration, oneByOne, easing } = getCustomParams(
+    animation,
+    animation.delayPerTime ?? 30,
+    animation.enterPerTime ?? 200
+  );
+  const { params = {} } = animation;
+  const { disappear, character } = option;
+  if (disappear || !character) {
+    return commonFade(instance, animation, option);
+  }
+
+  return {
+    type: params.direction === 'horizontal' ? 'growPointsXIn' : 'growPointsYIn',
+    options: {
+      orient: params.direction === 'horizontal' ? 'positive' : 'negative'
+    },
+    duration,
+    oneByOne,
+    easing
+  };
+};
 
 export const transformLineVisibility = (
   instance: VChart,
@@ -14,6 +43,9 @@ export const transformLineVisibility = (
     case 'fade': {
       return commonFade(instance, animation, option);
     }
+    case 'growPoints': {
+      return growPoints(instance, animation, option);
+    }
     default: {
       return commonFade(instance, animation, option);
     }

diff --git a/packages/vstory-player/src/processor/chart/visibility.ts b/packages/vstory-player/src/processor/chart/visibility.ts
@@ -141,7 +141,7 @@ export class VChartVisibilityActionProcessor extends VChartBaseActionProcessor {
     payload: IChartVisibilityPayload,
     isRun: boolean
   ) {
-    const vrenderComponents = component.getVRenderComponents();
+    const vrenderComponents = component.getVRenderComponents().filter((item: any) => !!item);
     const appearTransformFunc = transformMap.appear.legends;
     const defaultPayload = VChartVisibilityActionProcessor.fadePayload;
     vrenderComponents.forEach(group => {

diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx
@@ -48,6 +48,8 @@ import { MarketingWordcloud } from './demos/infographic/marking-wordcloud';
 // VchartEditor Runtime
 import { RuntimeSeriesMark } from './demos/runtime/series-mark';
 import { RuntimeLabelStyle } from './demos/runtime/label-style';
+import { LineChartArrange } from './demos/arrange/LineChart';
+import { PieChart } from './demos/arrange/PieChart';
 
 type MenusType = (
   | {
@@ -99,6 +101,14 @@ const App = () => {
           name: 'BarChart1',
           component: BarChart1
         },
+        {
+          name: 'LineChartArrange',
+          component: LineChartArrange
+        },
+        {
+          name: 'PieChart',
+          component: PieChart
+        },
         {
           name: 'BarChart2',
           component: BarChart2

diff --git a/packages/vstory/demo/src/demos/API.tsx b/packages/vstory/demo/src/demos/API.tsx
@@ -14,6 +14,7 @@ export const API = () => {
   useEffect(() => {
     const container = document.getElementById(id);
     const canvas = document.createElement('canvas');
+
     container?.appendChild(canvas);
 
     const story = new Story(null, { canvas, width: 800, height: 500, background: 'pink' });

diff --git a/packages/vstory/demo/src/demos/arrange/BarChart2.tsx b/packages/vstory/demo/src/demos/arrange/BarChart2.tsx
@@ -140,26 +140,26 @@ export const BarChart2 = () => {
                       ]
                     },
                     {
-                      startTime: 2000,
+                      startTime: 3000,
                       action: 'appear',
                       payload: [
                         {
                           selector: 'bar',
                           animation: {
-                            duration: 2000,
+                            duration: 800,
                             easing: 'linear'
                           }
                         }
                       ]
                     },
                     {
-                      startTime: 2000,
+                      startTime: 3000,
                       action: 'appear',
                       payload: [
                         {
                           selector: '#axes-right',
                           animation: {
-                            duration: 2000,
+                            duration: 800,
                             easing: 'linear'
                           }
                         }