VisActor · neuqzxy · Sep 12, 2024 · Sep 8, 2024 · Sep 9, 2024 · Sep 12, 2024
diff --git a/packages/vstory/demo/src/demos/StoryBarDemo.tsx b/packages/vstory/demo/src/demos/StoryBarDemo.tsx
@@ -347,7 +347,9 @@ export const StoryBarDemo = () => {
         ]
       };
       console.log('debug tempSpec', tempSpec);
-      const story = new Story(tempSpec as IStorySpec, { dom: id });
+      const story = new Story(tempSpec as IStorySpec, {
+        dom: id
+      });
       story.play();
     } catch (e) {
       console.error(e);

diff --git a/packages/vstory/demo/src/demos/StoryEdit.tsx b/packages/vstory/demo/src/demos/StoryEdit.tsx
@@ -198,7 +198,10 @@ export const StoryEdit = () => {
         }
       ]
     };
-    const story = new Story(tempSpec, { dom: id });
+    const story = new Story(tempSpec, {
+      dom: id,
+      playerOption: { scaleX: 0.6, scaleY: 0.6, offsetX: 100, offsetY: 0 }
+    });
     story.play(false);
     const edit = new Edit(story);
     edit.emitter.on('startEdit', msg => {

diff --git a/packages/vstory/src/constants/character.ts b/packages/vstory/src/constants/character.ts
@@ -1,6 +1,7 @@
 export const enum StoryChartType {
   VCHART = 'VChart',
-  RANKINGBAR = 'RankingBar'
+  RANKINGBAR = 'RankingBar',
+  PROGRESS_PIE = 'ProgressPie'
 }
 
 export enum StoryComponentType {

diff --git a/packages/vstory/src/edit/edit-component/edit-control/transform-control.ts b/packages/vstory/src/edit/edit-component/edit-control/transform-control.ts
@@ -25,6 +25,7 @@ import type { IEditComponent } from '../../interface';
 import { Edit } from '../../edit';
 import { DragComponent } from './transform-drag';
 import { StoryEvent } from '../../../story/interface';
+import { transformDeltaWithStage, transformPointWithStage } from '../../../util/transform';
 // import { EditorActionMode } from './enum';
 
 type AnchorDirection = 'top' | 'bottom' | 'left-top' | 'left-bottom' | 'right' | 'left' | 'right-top' | 'right-bottom';
@@ -257,9 +258,15 @@ export class TransformControl extends AbstractComponent<Required<TransformAttrib
   }
 
   protected _dragElement = (moveX: number, moveY: number) => {
+    const stage = this.stage;
+    if (!stage) {
+      return;
+    }
     this._lastBoxInDrag.setAttribute('visible', true);
-    const scale = this.stage.defaultLayer?.globalTransMatrix.a ?? 1;
-    this.moveBy(moveX / scale, moveY / scale);
+
+    const layer = stage.defaultLayer;
+    const p = transformDeltaWithStage(stage, { x: moveX, y: moveY }, layer.globalTransMatrix);
+    this.moveBy(p.x, p.y);
   };
   private _dragEnd = () => {
     this._editorEnd();
@@ -329,7 +336,11 @@ export class TransformControl extends AbstractComponent<Required<TransformAttrib
   protected handleDragMouseDown = (e: any) => {
     this.isEditor = true;
     this.editStartCbs.forEach(cb => cb(e));
-    const layerPos = transformPointWithMatrix(this.layer.globalTransMatrix.getInverse(), e.offset);
+    const layerPos = this.transformPoint(e.offset);
+    if (!layerPos) {
+      return;
+    }
+
     this.dragOffsetX = layerPos.x;
     this.dragOffsetY = layerPos.y;
 
@@ -351,8 +362,10 @@ export class TransformControl extends AbstractComponent<Required<TransformAttrib
     if (!this.isDragging) {
       return;
     }
-    // this._editComponent.isEditing = true;
-    const layerPos = transformPointWithMatrix(this.layer.globalTransMatrix.getInverse(), e.offset);
+    const layerPos = this.transformPoint(e.offset);
+    if (!layerPos) {
+      return;
+    }
 
     const dx = layerPos.x - this.dragOffsetX;
     const dy = layerPos.y - this.dragOffsetY;
@@ -466,9 +479,21 @@ export class TransformControl extends AbstractComponent<Required<TransformAttrib
     }
   }
 
+  private transformPoint(point: IPointLike) {
+    const stage = this.stage;
+    if (!stage) {
+      return;
+    }
+    // this._editComponent.isEditing = true;
+    return transformPointWithStage(stage, point, this.layer.globalTransMatrix);
+  }
+
   // 等比缩放
   private _handleScaleProportional(dx: number, dy: number, e: any) {
-    const layerPos = transformPointWithMatrix(this.layer.globalTransMatrix.getInverse(), e.offset);
+    const layerPos = this.transformPoint(e.offset);
+    if (!layerPos) {
+      return;
+    }
     const { attribute, temp } = this._getRectWithOffset(
       layerPos.x - this._eventPosBeforeScale.x,
       layerPos.y - this._eventPosBeforeScale.y,

diff --git a/packages/vstory/src/player/player.ts b/packages/vstory/src/player/player.ts
@@ -54,16 +54,18 @@ export class Player extends EventEmitter implements IPlayer {
     return this._ticker ? this._ticker.speed : 1;
   }
 
-  constructor(story: IStory, options?: { scaleX?: number; scaleY?: number }) {
+  constructor(story: IStory, options?: { scaleX?: number; scaleY?: number; offsetX?: number; offsetY?: number }) {
     super();
     this._story = story;
     this._ticker = new Ticker();
     this._currTime = 0;
     const stage = this._story.canvas.getStage();
     const scaleX = options?.scaleX ?? 1;
     const scaleY = options?.scaleY ?? 1;
+    const offsetX = options?.offsetX ?? 0;
+    const offsetY = options?.offsetY ?? 0;
 
-    stage.window.setViewBoxTransform(scaleX, 0, 0, scaleY, 0, 0);
+    stage.window.setViewBoxTransform(scaleX, 0, 0, scaleY, offsetX, offsetY);
 
     // stage.defaultLayer.setAttributes({
     //   scaleX,

diff --git a/packages/vstory/src/story/character/chart/character.ts b/packages/vstory/src/story/character/chart/character.ts
@@ -85,6 +85,7 @@ export class CharacterChart extends CharacterVisactor {
         this._spec.options.initOption ?? {}
       )
     });
+    this.hide();
     this.option.graphicParent.add(this._graphic as any);
   }
 

diff --git a/packages/vstory/src/story/character/chart/characters/progressPie.ts b/packages/vstory/src/story/character/chart/characters/progressPie.ts
@@ -0,0 +1,9 @@
+import { StoryFactory } from '../../../factory/factory';
+import { CharacterChart } from '../character';
+import { ProgressPieTemp } from '../temp/templates/progress-pie';
+
+StoryFactory.registerChartTemp(ProgressPieTemp.type, ProgressPieTemp);
+
+export class ProgressPieCharacter extends CharacterChart {
+  static type = 'ProgressPie';
+}
diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic.ts
@@ -93,7 +93,7 @@ export class Chart extends Graphic implements IVisactorGraphic {
   }
 
   constructor(params: IChartGraphicAttribute) {
-    super(params);
+    super({ ...params, visibleAll: false });
     this.numberType = CHART_NUMBER_TYPE;
 
     // 创建chart
@@ -146,9 +146,9 @@ export class Chart extends Graphic implements IVisactorGraphic {
     }
     // 背景设置为false后，不会擦除画布内容，可以实现元素正常堆叠绘制
     const stage = this._vchart.getStage();
-    stage.stage.pauseRender();
+    // TODO stage的pauseRender支持传入count
+    (stage as any)._skipRender = -Infinity;
     this._vchart.renderSync();
-    stage.stage.resumeRender();
     if (stage) {
       stage.background = false as any;
       // 关闭交互
@@ -157,6 +157,7 @@ export class Chart extends Graphic implements IVisactorGraphic {
     if (params.viewBox) {
       this.updateViewBox(params.viewBox);
     }
+    stage.resumeRender();
   }
 
   /**

diff --git a/packages/vstory/src/story/character/chart/temp/constant.ts b/packages/vstory/src/story/character/chart/temp/constant.ts
@@ -2,5 +2,6 @@ import { StoryChartType } from '../../../../constants/character';
 
 export const TemplateChartType = {
   vchart: StoryChartType.VCHART,
-  rankingBar: StoryChartType.RANKINGBAR
+  rankingBar: StoryChartType.RANKINGBAR,
+  progressPie: StoryChartType.PROGRESS_PIE
 };
diff --git a/packages/vstory/src/story/character/chart/temp/templates/bar.ts b/packages/vstory/src/story/character/chart/temp/templates/bar.ts
@@ -1,31 +1,31 @@
-import { TemplateChartType } from '../constant';
-import type { CharacterChart } from '../../character';
-import { BaseTemp } from './base-temp';
-import type { StandardData, DataInfo } from '../../data/interface';
+// import { TemplateChartType } from '../constant';
+// import type { CharacterChart } from '../../character';
+// import { BaseTemp } from './base-temp';
+// import type { StandardData, DataInfo } from '../../data/interface';
 
-export class BarTemp extends BaseTemp {
-  getSpec(data: StandardData, ctx: { character: CharacterChart }, opt?: any) {
-    throw new Error('Method not implemented.');
-  }
-  checkDataEnable(data: StandardData, info: DataInfo, opt?: any): boolean {
-    throw new Error('Method not implemented.');
-  }
-  static type: string = TemplateChartType.vchart;
-  type: string = BarTemp.type;
-  // 唯一系列类型
-  seriesType = 'bar';
-  // 默认是否展示总计标签
-  defaultTotalLabel = true;
+// export class BarTemp extends BaseTemp {
+//   getSpec(data: StandardData, ctx: { character: CharacterChart }, opt?: any) {
+//     throw new Error('Method not implemented.');
+//   }
+//   checkDataEnable(data: StandardData, info: DataInfo, opt?: any): boolean {
+//     throw new Error('Method not implemented.');
+//   }
+//   static type: string = TemplateChartType.vchart;
+//   type: string = BarTemp.type;
+//   // 唯一系列类型
+//   seriesType = 'bar';
+//   // 默认是否展示总计标签
+//   defaultTotalLabel = true;
 
-  protected _getSeriesSpec() {
-    return {
-      type: 'bar',
-      stack: true
-    };
-  }
+//   protected _getSeriesSpec() {
+//     return {
+//       type: 'bar',
+//       stack: true
+//     };
+//   }
 
-  afterInitializeChart(ctx: { character: CharacterChart }): void {
-    // eslint-disable-next-line no-console
-    console.log('afterInitializeChart');
-  }
-}
+//   afterInitializeChart(ctx: { character: CharacterChart }): void {
+//     // eslint-disable-next-line no-console
+//     console.log('afterInitializeChart');
+//   }
+// }
diff --git a/packages/vstory/src/story/character/chart/temp/templates/progress-pie.ts b/packages/vstory/src/story/character/chart/temp/templates/progress-pie.ts
@@ -0,0 +1,42 @@
+import { TemplateChartType } from '../constant';
+import type { CharacterChart } from '../../character';
+import { BaseTemp } from './base-temp';
+import type { StandardData, DataInfo } from '../../data/interface';
+
+export class ProgressPieTemp extends BaseTemp {
+  static type: string = TemplateChartType.vchart;
+  type: string = ProgressPieTemp.type;
+
+  checkDataEnable(data: StandardData, opt?: any): boolean {
+    return true;
+  }
+  getSpec(data: StandardData, opt: any) {
+    return {
+      type: 'pie',
+      data: data,
+      outerRadius: 0.8,
+      valueField: 'value',
+      categoryField: 'type',
+      morphingkey: 'a',
+      ...opt.character.specProcess.getCharacterSpec().options.spec
+    };
+    // TODO 转换特定chart Spec到通用common spec
+    // const cartesianCommonSpec = getCartesianCommonSpec(this.direction, this.percent, this.trimPadding) as any;
+    // if (cartesianCommonSpec.legends) {
+    //   cartesianCommonSpec.legends.visible = this.defaultLegendVisible;
+    // }
+
+    // return getCartesianSpec(this._getSeriesSpec.bind(this), cartesianCommonSpec, this.direction, data, {
+    //   multiDimensionField: this.multiDimensionField,
+    //   stack: this.stack,
+    //   xField: opt.character.specProcess.getCharacterSpec().options.xField,
+    //   yField: opt.character.specProcess.getCharacterSpec().options.yField,
+    //   seriesField: opt.character.specProcess.getCharacterSpec().options.seriesField
+    // });
+  }
+
+  afterInitializeChart(ctx: { character: CharacterChart }): void {
+    // eslint-disable-next-line no-console
+    console.log('afterInitializeChart');
+  }
+}
diff --git a/packages/vstory/src/story/interface/runtime-interface.ts b/packages/vstory/src/story/interface/runtime-interface.ts
@@ -9,6 +9,8 @@ export interface IStoryInitOption {
   width?: number;
   height?: number;
   playerOption?: {
+    offsetX?: number;
+    offsetY?: number;
     scaleX?: number;
     scaleY?: number;
   };

diff --git a/packages/vstory/src/util/transform.ts b/packages/vstory/src/util/transform.ts
@@ -0,0 +1,54 @@
+import type { IStage } from '@visactor/vrender-core';
+import type { IMatrix, IPointLike } from '@visactor/vutils';
+
+export function transformDeltaWithStage(
+  stage: IStage,
+  point: IPointLike,
+  subMatrix?: IMatrix
+): { x: number; y: number } {
+  const stageMatrix = stage.window.getViewBoxTransform();
+  const matrix = stageMatrix
+    .clone()
+    .multiply(
+      subMatrix?.a ?? 1,
+      subMatrix?.b ?? 0,
+      subMatrix?.c ?? 0,
+      subMatrix?.d ?? 1,
+      subMatrix?.e ?? 0,
+      subMatrix?.f ?? 0
+    );
+  const p0 = { x: 0, y: 0 };
+  const p1 = point;
+
+  const out1 = { x: 0, y: 0 };
+  const out2 = { x: 0, y: 0 };
+
+  matrix.transformPoint(p0, out1);
+  matrix.transformPoint(p1, out2);
+  return {
+    x: out2.x - out1.x,
+    y: out2.y - out1.y
+  };
+}
+
+export function transformPointWithStage(
+  stage: IStage,
+  point: IPointLike,
+  subMatrix?: IMatrix
+): { x: number; y: number } {
+  const stageMatrix = stage.window.getViewBoxTransform();
+  const matrix = stageMatrix
+    .clone()
+    .multiply(
+      subMatrix?.a ?? 1,
+      subMatrix?.b ?? 0,
+      subMatrix?.c ?? 0,
+      subMatrix?.d ?? 1,
+      subMatrix?.e ?? 0,
+      subMatrix?.f ?? 0
+    );
+
+  const out = { x: 0, y: 0 };
+  matrix.transformPoint(point, out);
+  return out;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -85,6 +85,7 @@ export class CharacterChart extends CharacterVisactor { @@
             this._spec.options.initOption ?? {}
           )
         });
+        this.hide();
         this.option.graphicParent.add(this._graphic as any);
       }
@@ Expand Down @@