feat: support pick vchart in empty space

packages/vstory/demo/src/demos/API.tsx

@@ -3,6 +3,11 @@ import { Story } from '../../../src/story/story';
 import Scene3ChartImage2 from '../assets/scene3/chart-2.png';
 import { loadAllSelection } from '../../../src/edit/edit-component';
 import { Edit } from '../../../src/edit/edit';
+import VChart from '@visactor/vchart';
+
+const response = await fetch('https://tosv.byted.org/obj/dpvis/yjt/a.json');
+const geojson = await response.json();
+VChart.registerMap('china', geojson);
 
 loadAllSelection();
 
@@ -24,6 +29,9 @@ export const API = () => {
         ]
       }
     ],
+    label: {
+      animation: false
+    },
     xField: 'month',
     yField: 'sales'
   };
@@ -46,6 +54,35 @@ export const API = () => {
         background: 'transparent',
         layerBackground: 'white'
       });
+
+      setTimeout(() => {
+        console.log('aaaaaaaaa');
+        story.addCharacterWithAppear({
+          type: 'VChart',
+          id: 'test-chart-1',
+          zIndex: 9,
+          position: {
+            top: 300,
+            left: 300,
+            width: 400,
+            height: 400
+            // angle: 0.3
+          },
+          options: {
+            panel: {
+              fill: 'red'
+            },
+            spec: {
+              type: 'map',
+              nameField: 'name',
+              valueField: 'value',
+              nameProperty: 'name',
+              map: 'china'
+            }
+          }
+        });
+        story.play();
+      }, 6000);
       // 创建character
       // const rect = story.addCharacterWithAppear({
       //   type: 'Rect',
@@ -104,6 +141,9 @@ export const API = () => {
           angle: 0.3
         },
         options: {
+          panel: {
+            fill: 'red'
+          },
           spec: chartSpec
         }
       });
@@ -231,15 +271,14 @@ export const API = () => {
       button.innerText = 'set color';
       document.body.appendChild(button);
       button.addEventListener('click', () => {
-        debugger;
         text.setConfig({ options: { graphic: { fill: 'red' } } });
       });
       (window as any).story = story;
       // setTimeout(() => {
       //   text.setConfig({ options: { group: { visible: false } } });
       // }, 1000);
 
-      chart.setConfig({ zIndex: -100 });
+      // chart.setConfig({ zIndex: -100 });
 
       // setTimeout(() => {
       //   chart.setConfig({

packages/vstory/demo/src/demos/VChartGraphic.tsx

@@ -1183,7 +1183,7 @@ const storySpec: IStorySpec = {
           id: 'scene0',
           actions: [
             {
-              characterId: 'vchart',
+              characterId: '2',
               characterActions: [
                 {
                   startTime: 0,

packages/vstory/src/story/canvas/canvas.ts

@@ -78,6 +78,7 @@ export class StoryCanvas implements IStoryCanvas {
         clickInterval: 300
       }
     });
+    stage.id = 'vstory';
     // @ts-ignore
     this._stage = stage;
   }
@@ -99,6 +100,7 @@ export class StoryCanvas implements IStoryCanvas {
         clickInterval: 300
       }
     });
+    stage.id = 'vstory';
     // @ts-ignore
     this._stage = stage;
   }

packages/vstory/src/story/character/chart/graphic/vrender/picker-interceptor.ts

@@ -0,0 +1,62 @@
+import type { IPickerService, IPickParams, PickResult } from '@visactor/vrender-core';
+import { injectable } from '@visactor/vrender-core';
+import type { IMatrix, IPointLike } from '@visactor/vutils';
+import { IAABBBounds } from '@visactor/vutils';
+
+@injectable()
+export class VChartPickServiceInterceptorContribution {
+  order: number = 1;
+  afterPickItem(
+    result: PickResult,
+    pickerService: IPickerService,
+    point: IPointLike,
+    pickParams: IPickParams,
+    params?: {
+      parentMatrix: IMatrix;
+    }
+  ): null | PickResult {
+    // 点击到图表的空白区域了，那么就判断该位置是否有其他图元，如果有，那就返回false，否则还是认为选中了图表
+    if (
+      result.graphic === null &&
+      result.group &&
+      (result.group as any).stage &&
+      (result.group as any).stage.id === 'vstory'
+    ) {
+      // console.log('aaaa', result);
+      const stage = (result.group as any).stage;
+      const charts = stage.getElementsByType('chart');
+      const nextPoint = { x: point.x, y: point.y };
+      if (params && params.parentMatrix) {
+        params.parentMatrix.transformPoint(point, nextPoint);
+      }
+
+      for (let i = charts.length - 1; i >= 0; i--) {
+        const chart = charts[i];
+        const pointInChart = { x: nextPoint.x, y: nextPoint.y };
+        chart.globalTransMatrix.transformPoint(pointInChart, pointInChart);
+        const viewBox = chart._vchart.getStage().viewBox;
+        // console.log(chart);
+        if (viewBox.contains(pointInChart.x, pointInChart.y)) {
+          result.graphic = chart;
+          result.group = null;
+          // result.group =
+          return result;
+        }
+      }
+    }
+
+    // if (result.graphic) {
+    //   let g = result.graphic;
+    //   while (g.parent) {
+    //     g = g.parent;
+    //   }
+    //   if (g.shadowHost) {
+    //     result.params = {
+    //       shadowTarget: result.graphic
+    //     };
+    //     result.graphic = g.shadowHost;
+    //   }
+    // }
+    return result;
+  }
+}

packages/vstory/src/story/character/chart/graphic/vrender/vchart-graphic.ts

@@ -1,6 +1,6 @@
 import type { IGroup } from '@visactor/vrender-core';
 import type { IVisactorGraphic } from '../../../visactor/interface';
-import { Bounds, type AABBBounds, type IAABBBounds, type IBoundsLike } from '@visactor/vutils';
+import { Bounds, isNumberClose, type AABBBounds, type IAABBBounds, type IBoundsLike } from '@visactor/vutils';
 import { VChart, type IInitOption, type ISpec, type IVChart } from '@visactor/vchart';
 import type { GraphicType, IGraphicAttribute, ITicker } from '@visactor/vrender';
 import { genNumberType, Rect } from '@visactor/vrender';
@@ -234,15 +234,17 @@ export class VChartGraphic extends Rect implements IVisactorGraphic {
     const rect = this._vchart.getChart().getCanvasRect();
     // 只有当尺寸变化时才resize
     if (
-      rect.width !== this._globalViewBox.x2 - this._globalViewBox.x1 ||
-      rect.height !== this._globalViewBox.y2 - this._globalViewBox.y1
+      !(
+        isNumberClose(rect.width, this._globalViewBox.x2 - this._globalViewBox.x1) &&
+        isNumberClose(rect.height, this._globalViewBox.y2 - this._globalViewBox.y1)
+      )
     ) {
-      this._vchart.resize(
+      (this._vchart as any).resizeSync(
         this._globalViewBox.x2 - this._globalViewBox.x1,
         this._globalViewBox.y2 - this._globalViewBox.y1
       );
     }
-    const rootBounds = this._getVChartBounds().expand(VIEW_BOX_EXPEND);
+    const rootBounds = this._getVChartBounds().expand(0);
     // 先更新位置
     this.setAttributes({
       // x: this._globalViewBox.x1 + rootBounds.x1,

packages/vstory/src/story/index.ts

@@ -2,7 +2,7 @@ import { CharacterComponentQipao } from './character/component/characters/charac
 import { CharacterComponentRect } from './character/component/characters/character-rect';
 import { StoryFactory } from './factory/factory';
 import { AutoEnablePlugins, ContainerModule, GraphicRender, RichTextEditPlugin, container } from '@visactor/vrender';
-import { CanvasPickerContribution } from '@visactor/vrender';
+import { CanvasPickerContribution, PickServiceInterceptor } from '@visactor/vrender';
 import { ChartRender, VChartRender } from './character/chart/graphic/vrender/vchart-graphic-render';
 import { CharacterComponentText } from './character/component/characters/character-text';
 // import { CharacterComponentRichText } from './character/component/characters/character-richtext';
@@ -16,6 +16,7 @@ import { ComponentGroupRender } from './character/component/character-group/comp
 import { CharacterComponentTimeline } from './character/component/characters/character-timeline';
 import { RankingBarCharacter } from './character/chart/characters/rankingBar';
 import { CharacterComponentUnit } from './character/component/characters/character-unit';
+import { VChartPickServiceInterceptorContribution } from './character/chart/graphic/vrender/picker-interceptor';
 
 const splitModule = new ContainerModule(bind => {
   // chart渲染器注入
@@ -24,6 +25,8 @@ const splitModule = new ContainerModule(bind => {
   bind(GraphicRender).toService(ChartRender);
   bind(VChartPicker).to(VChartPicker).inSingletonScope();
   bind(CanvasPickerContribution).toService(VChartPicker);
+  bind(VChartPickServiceInterceptorContribution).toSelf().inSingletonScope();
+  bind(PickServiceInterceptor).toService(VChartPickServiceInterceptorContribution);
 
   // component渲染器注入
   bind(ComponentGroupRender).toSelf().inSingletonScope();