VisActor · neuqzxy · Jul 15, 2024 · Jul 15, 2024
diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/area/areaDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/area/areaDisappear.ts
@@ -1,15 +1,20 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 import { axesDisappearProcessor, titleDisappearProcessor } from '../../components';
 import { areaDisappearProcessor as areaMarkDisappearProcessor } from '../../marks';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const areaDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/bar/barDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/bar/barDisappear.ts
@@ -1,16 +1,21 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 
 import { axesDisappearProcessor, titleDisappearProcessor } from '../../components';
 import { rectDisappearProcessor } from '../../marks';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const barDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/character/characterDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/character/characterDisappear.ts
@@ -1,13 +1,18 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const characterDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/common/commonDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/common/commonDisappear.ts
@@ -10,6 +10,7 @@ import {
   lineDisappearProcessor as lineMarkDisappearProcessor,
   areaDisappearProcessor as areaMarkDisappearProcessor
 } from '../../marks';
+import type { EasingType } from '@visactor/vrender-core';
 
 export const commonDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
@@ -39,3 +40,29 @@ export const commonDisappearProcessor = async (
     visible: false
   });
 };
+export const commonDisappearByBaseOpacity = (
+  chartInstance: ICharacterVisactor,
+  spec: ISpec,
+  action: IChartAppearAction
+) => {
+  const chart = chartInstance.getGraphicParent();
+  const vchart = chart?._vchart;
+  const instance: VChart = vchart ? vchart : chartInstance;
+
+  if (!instance) {
+    return;
+  }
+
+  const duration = action.payload.animation?.duration;
+  const easing = action.payload.animation?.easing;
+
+  if (action.payload.fade?.isBaseOpacity) {
+    chart.setAttributes({
+      baseOpacity: 1
+    });
+
+    chart.animate().to({ baseOpacity: 0 }, duration, easing as EasingType);
+    return true;
+  }
+  return false;
+};
diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/line/lineDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/line/lineDisappear.ts
@@ -1,16 +1,21 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 
 import { axesDisappearProcessor, titleDisappearProcessor } from '../../components';
 import { lineDisappearProcessor as lineMarkDisappearProcessor } from '../../marks';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const lineDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/pie/pieDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/pie/pieDisappear.ts
@@ -1,16 +1,21 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 
 import { axesDisappearProcessor, titleDisappearProcessor } from '../../components';
 import { arcDisappearProcessor } from '../../marks';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const pieDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/radar/radarDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/radar/radarDisappear.ts
@@ -1,15 +1,20 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 import { axesDisappearProcessor, titleDisappearProcessor } from '../../components';
 import { areaDisappearProcessor, lineDisappearProcessor, symbolDisappearProcessor } from '../../marks';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const radarDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/rose/roseDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/rose/roseDisappear.ts
@@ -1,16 +1,21 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 
 import { axesDisappearProcessor, titleDisappearProcessor } from '../../components';
 import { arcDisappearProcessor } from '../../marks';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const roseDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/scatter/scatterDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/scatter/scatterDisappear.ts
@@ -1,15 +1,20 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 import { axesDisappearProcessor, titleDisappearProcessor } from '../../components';
 import { symbolDisappearProcessor } from '../../marks';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const scatterDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/sunburst/sunburstDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/sunburst/sunburstDisappear.ts
@@ -1,15 +1,20 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 import { axesDisappearProcessor, titleDisappearProcessor } from '../../components';
 import { arcDisappearProcessor, rectDisappearProcessor } from '../../marks';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const sunburstDisappearProcessor = async (
      chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/treeMap/treeMapDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/treeMap/treeMapDisappear.ts
@@ -1,15 +1,20 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 import { axesDisappearProcessor, titleDisappearProcessor } from '../../components';
 import { rectDisappearProcessor } from '../../marks';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const treeMapDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/wordCloud/wordCloudDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/wordCloud/wordCloudDisappear.ts
@@ -1,15 +1,20 @@
-import VChart, { ISpec } from '@visactor/vchart';
-import { IChartAppearAction } from '../../../../types/chart/appear';
-import { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
+import type { ISpec } from '@visactor/vchart';
+import type VChart from '@visactor/vchart';
+import type { IChartAppearAction } from '../../../../types/chart/appear';
+import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface';
 import { axesDisappearProcessor, titleDisappearProcessor } from '../../components';
 import { textDisappearProcessor } from '../../marks';
 import { graphicDisappearProcessor } from '../../../graphic/disappear';
+import { commonDisappearByBaseOpacity } from '../common/commonDisappear';
 
 export const wordCloudDisappearProcessor = async (
   chartInstance: ICharacterVisactor,
   spec: ISpec,
   action: IChartAppearAction
 ) => {
+  if (commonDisappearByBaseOpacity(chartInstance, spec, action)) {
+    return;
+  }
   const chart = chartInstance.getGraphicParent();
   const vchart = chart?._vchart;
   const instance: VChart = vchart ? vchart : chartInstance;

diff --git a/packages/vstory/src/dsl/types/chart/appear.ts b/packages/vstory/src/dsl/types/chart/appear.ts
@@ -10,6 +10,7 @@ export interface IChartAppearPayLoad extends IActionPayload {
      */
     effect: string;
   };
+  fade?: { isBaseOpacity?: boolean };
 }
 
 export interface IChartAppearAction extends IAction {
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ export interface IChartAppearPayLoad extends IActionPayload { @@
          */
         effect: string;
       };
+      fade?: { isBaseOpacity?: boolean };
     }
     export interface IChartAppearAction extends IAction {
@@ Expand Down @@