Feat/optimization vchart graphic

packages/vstory/demo/src/App.tsx

@@ -18,6 +18,7 @@ import { Pictogram } from './demos/infographics/Pictogram';
 import { LV_BAR1 } from './demos/lv/bar1';
 import { BarLineSeries } from './demos/BarLineSeries';
 import { wordcloud } from './demos/wordcloud';
+import { VChartGraphic } from './demos/VChartGraphic';
 import { BaseComponent } from './demos/BaseComponent';
 import { BarLineSeriesSelector } from './demos/BarLineSeriesSelector';
 import { RankingBar } from './demos/template/RankingBar';
@@ -121,6 +122,10 @@ const App = () => {
     {
       name: 'RankingBar',
       component: RankingBar
+    },
+    {
+      name: 'VChartGraphic',
+      component: VChartGraphic
     }
   ];
   const getSelectedMenu = useCallback<(menus: MenusType) => any>(

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

@@ -4,7 +4,6 @@ import { Story } from '../../../src/story/story';
 import { Edit } from '../../../src/edit/edit';
 import '../../../src/story/index';
 import { cloneDeep } from '@visactor/vutils';
-import { CommonEditComponent } from '../../../src/edit/edit-component/common';
 import { BoxSelection } from '../../../src/edit/edit-component/box-selection';
 import { TextSelection } from '../../../src/edit/edit-component/text-selection';
 import { RichTextSelection } from '../../../src/edit/edit-component/richtext-selection';

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

@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
 import { IStorySpec } from '../../../src/story/interface';
 import { Story } from '../../../src/story/story';
-import { Edit } from '../../../src/edit/edit';
 import '../../../src/story/index';
 import { cloneDeep } from '@visactor/vutils';
 import Scene3ChartImage2 from '../assets/scene3/chart-2.png';
 import { loadAllSelection } from '../../../src/edit/edit-component';
+import { Edit } from '../../../src/edit/edit';
 
 // Edit.registerEditComponent('common', CommonEditComponent);
 loadAllSelection();

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

@@ -0,0 +1,235 @@
+import React, { useEffect } from 'react';
+import { IStorySpec } from '../../../src/story/interface';
+import { Story } from '../../../src/story/story';
+import '../../../src/story/index';
+import { Edit } from '../../../src/edit/edit';
+import { BoxSelection } from '../../../src/edit/edit-component/box-selection';
+import { TextSelection } from '../../../src/edit/edit-component/text-selection';
+import { RichTextSelection } from '../../../src/edit/edit-component/richtext-selection';
+
+Edit.registerEditComponent('text', TextSelection);
+Edit.registerEditComponent('richtext', RichTextSelection);
+Edit.registerEditComponent('box-selection', BoxSelection);
+
+const spec = {
+  type: 'bar',
+  data: [
+    {
+      id: 'barData',
+      values: [
+        {
+          name: 'Apple',
+          value: 214480
+        },
+        {
+          name: 'Google',
+          value: 155506
+        },
+        {
+          name: 'Amazon',
+          value: 100764
+        },
+        {
+          name: 'Microsoft',
+          value: 92715
+        },
+        {
+          name: 'Coca-Cola',
+          value: 66341
+        },
+        {
+          name: 'Samsung',
+          value: 59890
+        },
+        {
+          name: 'Toyota',
+          value: 53404
+        },
+        {
+          name: 'Mercedes-Benz',
+          value: 48601
+        },
+        {
+          name: 'Facebook',
+          value: 45168
+        },
+        {
+          name: "McDonald's",
+          value: 43417
+        },
+        {
+          name: 'Intel',
+          value: 43293
+        },
+        {
+          name: 'IBM',
+          value: 42972
+        },
+        {
+          name: 'BMW',
+          value: 41006
+        },
+        {
+          name: 'Disney',
+          value: 39874
+        },
+        {
+          name: 'Cisco',
+          value: 34575
+        },
+        {
+          name: 'GE',
+          value: 32757
+        },
+        {
+          name: 'Nike',
+          value: 30120
+        },
+        {
+          name: 'Louis Vuitton',
+          value: 28152
+        },
+        {
+          name: 'Oracle',
+          value: 26133
+        },
+        {
+          name: 'Honda',
+          value: 23682
+        }
+      ]
+    }
+  ],
+  direction: 'horizontal',
+  xField: 'value',
+  yField: 'name',
+  axes: [
+    {
+      orient: 'bottom',
+      visible: false
+    }
+  ],
+  label: {
+    visible: true,
+    animation: false
+  }
+};
+
+export const VChartGraphic = () => {
+  const id = 'storyBar';
+
+  const chartData = [
+    { year: '2017', value: 129 },
+    { year: '2018', value: 150 },
+    { year: '2019', value: 130 },
+    { year: '2020', value: 126 },
+    { year: '2021', value: 117 },
+    { year: '2022', value: 180 },
+    { year: 'Target', value: 200 }
+  ];
+
+  useEffect(() => {
+    // 准备一个图表
+    const tempSpec: IStorySpec = {
+      characters: [
+        {
+          type: 'Rect',
+          id: 'test-graphics-0',
+          zIndex: 10,
+          position: {
+            top: 40,
+            left: 50,
+            width: 250,
+            height: 100
+          },
+          options: {
+            graphic: {
+              fill: 'red'
+            },
+            text: {
+              text: 'haha',
+              fill: 'black'
+            },
+            angle: 0,
+            shapePoints: []
+          }
+        },
+        {
+          type: 'VChart',
+          id: 'test-chart-0',
+          zIndex: 10,
+          position: {
+            top: 40,
+            left: 50,
+            width: 500,
+            height: 500
+          },
+          options: {
+            spec
+          }
+        }
+      ],
+      acts: [
+        {
+          id: 'default-chapter',
+          scenes: [
+            {
+              id: 'scene0',
+              actions: [
+                {
+                  characterId: 'test-graphics-0',
+                  characterActions: [
+                    {
+                      startTime: 0,
+                      action: 'appear',
+                      selector: '*',
+                      payload: {
+                        style: {},
+                        animation: {
+                          effect: 'move',
+                          move: { pos: 'top' },
+                          duration: 1000,
+                          easing: 'linear'
+                        } as any
+                      }
+                    }
+                  ]
+                },
+                {
+                  characterId: 'test-chart-0',
+                  characterActions: [
+                    {
+                      startTime: 0,
+                      action: 'appear',
+                      selector: '*',
+                      payload: {
+                        style: {},
+                        animation: {
+                          effect: 'fade',
+                          move: { pos: 'top' },
+                          duration: 1000,
+                          easing: 'linear'
+                        } as any
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    };
+    const story = new Story(tempSpec, { dom: id });
+    story.play(false);
+    const edit = new Edit(story);
+    edit.emitter.on('startEdit', msg => {
+      if (msg.type === 'commonEdit' && msg.actionInfo.character) {
+        msg.updateCharacter({ options: { graphic: { fill: 'green' } } });
+        story.play();
+      }
+    });
+  }, []);
+
+  return <div style={{ width: '100%', height: '100%' }} id={id}></div>;
+};

packages/vstory/demo/src/demos/lv/bar1.tsx

@@ -4,7 +4,6 @@ import { Story } from '../../../../src/story/story';
 import { Edit } from '../../../../src/edit/edit';
 import '../../../../src/story/index';
 import { cloneDeep } from '@visactor/vutils';
-import { CommonEditComponent } from '../../../../src/edit/edit-component/common';
 import { BoxSelection } from '../../../../src/edit/edit-component/box-selection';
 import { TextSelection } from '../../../../src/edit/edit-component/text-selection';
 import { RichTextSelection } from '../../../../src/edit/edit-component/richtext-selection';

packages/vstory/src/edit/const.ts

@@ -1,4 +1,4 @@
-export const PickEventType = {
+export const PickEventType: { [key: string]: boolean } = {
   pointerup: true,
   click: true,
   pointerdown: true,

packages/vstory/src/edit/edit-action.ts

@@ -9,13 +9,13 @@ import type { ContinuousActionType, IEditActionInfo } from './interface';
 import { EditActionEnum } from './interface';
 import type { StoryEvent } from '../story/interface/runtime-interface';
 
-const IgnoreEvent = {
+const IgnoreEvent: { [key: string]: boolean } = {
   mousemove: true,
   mouseout: true,
   mouseover: true
 };
 
-const PointerOverEvent = {
+const PointerOverEvent: { [key: string]: boolean } = {
   pointerover: true,
   pointerout: true,
   pointermove: true

packages/vstory/src/edit/edit-component/base-selection.ts

@@ -168,7 +168,7 @@ export abstract class BaseSelection implements IEditComponent {
 
   protected handlerTransformChange(data: IUpdateParams, event?: VRenderPointerEvent): void {
     if (this._activeCharacter) {
-      this._activeCharacter.setAttributes(data);
+      this._activeCharacter.setAttributes({ position: data });
     }
   }
 }

packages/vstory/src/edit/edit-component/chart-selection.ts

@@ -20,18 +20,9 @@ export class ChartSelection extends BaseSelection implements IEditComponent {
       return;
     }
 
-    const viewBox = (actionInfo.character.graphic as Chart).vchart.getStage().viewBox;
     const group = actionInfo.character.getGraphicParent();
-    const { angle, x, y } = group.attribute;
-    this._layoutComponent.updateBoundsAndAngle(
-      {
-        x1: viewBox.x1 + x,
-        y1: viewBox.y1 + y,
-        x2: viewBox.x2 + x,
-        y2: viewBox.y2 + y
-      },
-      angle
-    );
+    const { angle } = group.attribute;
+    this._layoutComponent.updateBoundsAndAngle(actionInfo.character.getLayoutBounds(), angle);
     // this._layoutComponent.updateBoundsAndAngle(actionInfo.character.getGraphicParent().AABBBounds, 0);
   }
 

packages/vstory/src/edit/edit-component/edit-control/transform-control.ts

@@ -891,7 +891,16 @@ export class TransformControl extends AbstractComponent<Required<TransformAttrib
     this.removeEventListener('pointerdown', this.handleDragMouseDown);
   }
 
+  releaseDragger() {
+    if (!this._dragger) {
+      return;
+    }
+    this._dragger.release();
+  }
+
+  private _isRelease = false;
   release(): void {
+    this._isRelease = true;
     // event
     this.releaseEvent();
 

packages/vstory/src/edit/edit-component/edit-control/transform-drag.ts

@@ -11,9 +11,11 @@ export class DragComponent {
 
   private _lastPosX: number;
   private _lastPosY: number;
+  private _stage: IStage;
   // protected _container: HTMLElement;
 
   constructor(stage: IStage) {
+    this._stage = stage;
     stage.addEventListener('pointermove', this.pointerMove, true);
     stage.addEventListener('pointerup', this.stopDrag, true);
   }
@@ -65,8 +67,11 @@ export class DragComponent {
   };
 
   release() {
-    window.removeEventListener('pointermove', this.pointerMove, true);
-    window.removeEventListener('pointerup', this.stopDrag, true);
+    if (this._stage) {
+      this._stage.removeEventListener('pointermove', this.pointerMove, true);
+      this._stage.removeEventListener('pointerup', this.stopDrag, true);
+      this._stage = null;
+    }
     this._dragHandler = null;
     this._dragEndHandler = null;
   }

packages/vstory/src/edit/edit-component/image-selection.ts

@@ -1,4 +1,3 @@
-// import { StoryGraphicType } from '../../dsl/constant';
 import { StoryComponentType } from '../../constants/character';
 import { type IEditComponent } from '../interface';
 import { BaseSelection } from './base-selection';

packages/vstory/src/edit/edit-component/index.ts

@@ -1,11 +1,9 @@
 // import { CommonEditComponent } from './common';
 import { BoxSelection } from './box-selection';
 import { ImageSelection } from './image-selection';
-import { TextSelection } from './text-selection';
-import { RichTextSelection } from './richtext-selection';
 import { RectSelection } from './rect-selection';
-import { Edit } from '../edit';
 import { ChartSelection } from './chart-selection';
+import { Edit } from '../edit';
 import { ShapeSelection } from './shape-selection';
 
 export function loadAllSelection() {