feat: support selector array

VisActor · Dec 26, 2024 · b4f8478 · b4f8478
1 parent 515f13f
commit b4f8478
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 21 deletions.
diff --git a/common/changes/@visactor/vstory-animate/feat-selector-array_2024-12-26-10-21.json b/common/changes/@visactor/vstory-animate/feat-selector-array_2024-12-26-10-21.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vstory-animate",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vstory-animate"
+}
diff --git a/common/changes/@visactor/vstory-core/feat-selector-array_2024-12-26-10-21.json b/common/changes/@visactor/vstory-core/feat-selector-array_2024-12-26-10-21.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vstory-core",
+      "comment": "feat: support selector array",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vstory-core"
+}
diff --git a/common/changes/@visactor/vstory/feat-selector-array_2024-12-26-10-21.json b/common/changes/@visactor/vstory/feat-selector-array_2024-12-26-10-21.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vstory",
+      "comment": "feat: support selector array",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vstory"
+}
diff --git a/packages/vstory-core/src/character/chart/character-chart.ts b/packages/vstory-core/src/character/chart/character-chart.ts
@@ -17,6 +17,7 @@ import { mergeChartOption } from '../../utils/chart';
 import type { IComponent, ISeries, IVChart } from '@visactor/vchart';
 import { MarkStyleRuntimeInstance } from './runtime/mark-style';
 import { LabelStyleRuntimeInstance } from './runtime/label-style';
+import { isArray } from '@visactor/vutils';
 
 export class CharacterChart<T extends IChartGraphicAttribute>
   extends CharacterBase<IChartGraphicAttribute>
@@ -49,7 +50,30 @@ export class CharacterChart<T extends IChartGraphicAttribute>
     this._graphic.vchart.getStage().ticker.tickAt && this._graphic.vchart.getStage().ticker.tickAt(t);
   }
 
-  getGraphicBySelector(selector: string) {
+  getGraphicBySelector(selector: string | string[]) {
+    let chart = false;
+    let panel = false;
+    const seriesList: Set<ISeries> = new Set();
+    const componentsList: Set<IComponent> = new Set();
+    if (isArray(selector)) {
+      selector.forEach(s => {
+        const data = this._getGraphicBySelector(s);
+        chart = chart || data.chart;
+        panel = panel || data.panel;
+        data.seriesList.forEach(s => seriesList.add(s));
+        data.componentsList.forEach(c => componentsList.add(c));
+      });
+      return {
+        chart,
+        panel,
+        seriesList: Array.from(seriesList.values()),
+        componentsList: Array.from(componentsList.values())
+      };
+    }
+    return this._getGraphicBySelector(selector);
+  }
+
+  _getGraphicBySelector(selector: string) {
     const vchart = this._graphic.vchart;
     let chart = false;
     let seriesList = vchart.getChart().getAllSeries();

diff --git a/packages/vstory-core/src/character/component/character-component.ts b/packages/vstory-core/src/character/component/character-component.ts
@@ -6,6 +6,7 @@ import type { ICharacterInitOption } from '../../interface/dsl/dsl';
 import { ComponentConfigProcess } from './component-config-process';
 import type { ICharacterComponent } from './interface/character-component';
 import type { IStoryEvent, ICharacterPickInfo } from '../../interface/event';
+import { isArray } from '@visactor/vutils';
 
 export abstract class CharacterComponent<T extends IGraphic, T1>
   extends CharacterBase<T1>
@@ -30,7 +31,20 @@ export abstract class CharacterComponent<T extends IGraphic, T1>
     return;
   }
 
-  getGraphicBySelector(selector: string) {
+  getGraphicBySelector(selector: string | string[]) {
+    if (isArray(selector)) {
+      const graphics: Set<IGraphic> = new Set();
+      selector.forEach(s => {
+        this._getGraphicBySelector(s).forEach(g => {
+          graphics.add(g);
+        });
+      });
+      return Array.from(graphics.values());
+    }
+    return this._getGraphicBySelector(selector);
+  }
+
+  _getGraphicBySelector(selector: string) {
     const g = this._graphic;
     if (!selector) {
       return [g];

diff --git a/packages/vstory-core/src/character/table/character-table.ts b/packages/vstory-core/src/character/table/character-table.ts
@@ -48,7 +48,7 @@ export class CharacterTable<T extends ITableGraphicAttribute>
     this._graphic.vTableStage.ticker.tickAt && this._graphic.vTableStage.ticker.tickAt(t);
   }
 
-  getGraphicBySelector(selector: string) {
+  getGraphicBySelector(selector: string | string[]) {
     const table = true;
     // 是否包含panel, >0为包含
     const includePanel = 1;

diff --git a/packages/vstory-core/src/interface/character.ts b/packages/vstory-core/src/interface/character.ts
@@ -29,7 +29,7 @@ export interface ICharacter extends IReleaseable {
   hide: () => void;
 
   getGraphic: () => IGraphic;
-  getGraphicBySelector?: (selector: string) => any;
+  getGraphicBySelector?: (selector: string | string[]) => any;
   tickTo: (t: number) => void;
 
   checkEvent: (event: IStoryEvent) => false | (ICharacterPickInfo & any);

diff --git a/packages/vstory-player/src/processor/chart/base.ts b/packages/vstory-player/src/processor/chart/base.ts
@@ -10,7 +10,7 @@ export class VChartBaseActionProcessor extends ActionProcessorItem {
    * @param vchart
    */
   selectBySelector(
-    selector: string,
+    selector: string | string[],
     character: ICharacter
   ): {
     chart: boolean;

diff --git a/packages/vstory-player/src/processor/component/common/visibility.ts b/packages/vstory-player/src/processor/component/common/visibility.ts
@@ -59,7 +59,7 @@ export class CommonVisibilityActionProcessor extends ActionProcessorItem {
     });
   }
 
-  selectBySelector(selector: string, character: ICharacter): IGraphic[] {
+  selectBySelector(selector: string | string[], character: ICharacter): IGraphic[] {
     if (character.getGraphicBySelector) {
       return character.getGraphicBySelector(selector);
     }

diff --git a/packages/vstory-player/src/processor/table/base.ts b/packages/vstory-player/src/processor/table/base.ts
@@ -9,7 +9,7 @@ export class VTableBaseActionProcessor extends ActionProcessorItem {
    * @param vtable
    */
   selectBySelector(
-    selector: string,
+    selector: string | string[],
     character: ICharacter
   ): {
     table: boolean;

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