Merge pull request #184 from VisActor/feat/runtime-series-mark

Feat/runtime series mark

common/changes/@visactor/vstory-core/feat-runtime-series-mark_2024-12-23-08-38.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: change runtime logic about get the character config\n\n",
+      "type": "none",
+      "packageName": "@visactor/vstory-core"
+    }
+  ],
+  "packageName": "@visactor/vstory-core",
+  "email": "[email protected]"
+}

common/changes/@visactor/vstory/feat-runtime-series-mark_2024-12-23-08-38.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: change runtime logic about get the character config\n\n",
+      "type": "none",
+      "packageName": "@visactor/vstory"
+    }
+  ],
+  "packageName": "@visactor/vstory",
+  "email": "[email protected]"
+}

packages/vstory-core/src/character/chart/character-chart.ts

@@ -15,6 +15,8 @@ import { ChartConfigProcess } from './chart-config-process';
 import type { ICharacterChart } from './interface/character-chart';
 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';
 
 export class CharacterChart<T extends IChartGraphicAttribute>
   extends CharacterBase<IChartGraphicAttribute>
@@ -24,6 +26,10 @@ export class CharacterChart<T extends IChartGraphicAttribute>
   protected declare _graphic: VChartGraphic;
   protected declare _config: IChartCharacterConfig;
 
+  // 临时记录 vchart 对象。在第一次执行 afterInitializeChart 后赋值， 在 afterVRenderDraw 中使用
+  // 不临时记录的话，第一次 afterVRenderDraw 时，graphic 对象还未执行完初始化，当前对象的 _graphic 为 null
+  protected _vchart: IVChart;
+
   protected _ticker: ITicker;
   protected _timeline: ITimeline;
   protected _runtime: IChartCharacterRuntime[] = [];
@@ -146,7 +152,12 @@ export class CharacterChart<T extends IChartGraphicAttribute>
   }
 
   protected _initRuntime(): void {
-    this._runtime.push(CommonSpecRuntimeInstance, CommonLayoutRuntimeInstance);
+    this._runtime.push(
+      CommonSpecRuntimeInstance,
+      CommonLayoutRuntimeInstance,
+      MarkStyleRuntimeInstance,
+      LabelStyleRuntimeInstance
+    );
   }
   protected _clearRuntime(): void {
     this._runtime.length = 0;
@@ -188,17 +199,26 @@ export class CharacterChart<T extends IChartGraphicAttribute>
         {
           performanceHook: {
             afterInitializeChart: (vchart: IVChart) => {
-              // (<IChartTemp>this.configProcess.dataTempTransform?.specTemp)?.afterInitialize({ character: this });
+              this._vchart = vchart;
               this._runtime.forEach(r => r.afterInitialize?.(this, vchart));
             },
 
             afterVRenderDraw: () => {
-              this._runtime.forEach(r => r.afterVRenderDraw?.(this));
+              this._runtime.forEach(r => r.afterVRenderDraw?.(this, this._graphic?.vchart ?? this._vchart));
             }
           }
         },
         this._config.options.initOption ?? {}
       )
     };
   }
+
+  protected _clearGraphic(): void {
+    super._clearGraphic();
+    this._vchart = null;
+  }
+
+  getRuntimeConfig() {
+    return this;
+  }
 }

packages/vstory-core/src/character/chart/interface/character-chart.ts

@@ -1,6 +1,11 @@
-import type { ICharacter } from '../../../interface/character';
+import type { ICharacter, ICharacterRuntimeConfig } from '../../../interface/character';
 import type { IChartCharacterConfig } from '../../../interface/dsl/chart';
 
 export interface ICharacterChart extends ICharacter {
   config: IChartCharacterConfig;
+  getRuntimeConfig: () => ICharacterChartRuntimeConfig;
+}
+
+export interface ICharacterChartRuntimeConfig extends ICharacterRuntimeConfig {
+  config: IChartCharacterConfig;
 }

packages/vstory-core/src/character/chart/interface/runtime.ts

@@ -1,16 +1,16 @@
 import type { IVChart } from '@visactor/vchart';
-import type { ICharacter } from '../../../interface/character';
 import type { ICharacterConfig } from '../../../interface/dsl/dsl';
+import type { ICharacterChartRuntimeConfig } from './character-chart';
 export interface IChartCharacterRuntime {
   readonly type: string;
   // 应用config到attribute
-  applyConfigToAttribute?: (character: ICharacter) => void;
+  applyConfigToAttribute?: (character: ICharacterChartRuntimeConfig) => void;
 
   // 图表初始化完成
-  afterInitialize?: (character: ICharacter, vchart: IVChart) => void;
+  afterInitialize?: (character: ICharacterChartRuntimeConfig, vchart: IVChart) => void;
 
   // 图表绘制完成
-  afterVRenderDraw?: (character: ICharacter) => void;
+  afterVRenderDraw?: (character: ICharacterChartRuntimeConfig, vchart: IVChart) => void;
 }
 
 export interface IChartCharacterRuntimeConstructor {

packages/vstory-core/src/character/chart/runtime/common-layout.ts

@@ -6,8 +6,8 @@ export class CommonLayoutRuntime implements IChartCharacterRuntime {
   type = 'CommonLayout';
 
   applyConfigToAttribute(character: ICharacterChart): void {
-    const rawAttribute = character.getAttribute();
-    const config = character.config;
+    const rawAttribute = character.getRuntimeConfig().getAttribute();
+    const config = character.getRuntimeConfig().config;
     const layoutData = getLayoutFromWidget(config.position);
     const layout = getLayoutFromWidget(config.position);
     const viewBox = {

packages/vstory-core/src/character/chart/runtime/common-spec.ts

@@ -6,9 +6,10 @@ export class CommonSpecRuntime implements IChartCharacterRuntime {
   type = 'CommonSpec';
 
   applyConfigToAttribute(character: ICharacterChart): void {
-    const rawAttribute = character.getAttribute();
+    const rawAttribute = character.getRuntimeConfig().getAttribute();
+    const config = character.getRuntimeConfig().config;
     const { spec } = rawAttribute;
-    const options = character.config.options;
+    const options = config.options;
     const { title, legends, data, color, axes, rootConfig = {}, padding } = options;
 
     if (title) {

packages/vstory-core/src/character/chart/runtime/const.ts

@@ -0,0 +1,92 @@
+// vchart 内置的数据序号
+export const VCHART_DATA_INDEX = '__VCHART_DEFAULT_DATA_INDEX';
+
+export const EDITOR_SERIES_MARK_STYLE_LEVEL = 90;
+export const EDITOR_SERIES_MARK_SINGLE_LEVEL = 100;
+
+const CommonMarkAttribute = ['visible', 'stroke', 'strokeOpacity', 'lineWidth', 'lineDash', 'curveType', 'zIndex'];
+export const fillMarkAttribute = [...CommonMarkAttribute, 'fill', 'fillOpacity'];
+export const rectMarkAttribute = [...fillMarkAttribute, 'cornerRadius'];
+export const arcMarkAttribute = [...fillMarkAttribute, 'cornerRadius', 'centerOffset', 'innerRadius', 'outerRadius'];
+export const pointMarkAttribute = [...CommonMarkAttribute, 'fill', 'fillOpacity', 'size', 'shape', 'symbolType'];
+export const UseDefaultSeriesStyle = '_story_series_style_default';
+export const CommonLabelStyleMap = {
+  style: [...fillMarkAttribute, 'font', 'fontSize', 'fontStyle', 'fontWeight', 'underline', 'background'],
+  attribute: ['position', 'offset', 'overlap', 'smartInvert']
+};
+
+export const CommonMarkAttributeMap: { [key: string]: string[] } = {
+  arc: arcMarkAttribute,
+  rect: rectMarkAttribute,
+  symbol: pointMarkAttribute,
+  text: CommonLabelStyleMap.style
+};
+
+export const SeriesMarkStyleMap: {
+  // 系列 类型
+  [key: string]: {
+    // 系列内的 mark name ｜ 或者某种系列层属性
+    [key: string]: {
+      style: string[]; // mark 的可编辑样式 key 的数组
+      attribute: string[]; // mark 的可编辑属性 key 的数组
+    };
+  };
+} = {
+  bar: {
+    bar: {
+      style: [...rectMarkAttribute],
+      attribute: []
+    },
+    label: CommonLabelStyleMap
+  },
+  line: {
+    line: {
+      style: [...CommonMarkAttribute],
+      attribute: []
+    },
+    point: {
+      style: pointMarkAttribute,
+      attribute: []
+    },
+    label: CommonLabelStyleMap
+  },
+  area: {
+    line: {
+      style: [...CommonMarkAttribute],
+      attribute: []
+    },
+    area: {
+      style: [...fillMarkAttribute],
+      attribute: []
+    },
+    point: {
+      style: pointMarkAttribute,
+      attribute: []
+    },
+    label: CommonLabelStyleMap
+  },
+  waterfall: {
+    bar: {
+      style: [...rectMarkAttribute],
+      attribute: []
+    },
+    label: CommonLabelStyleMap
+  },
+  pie: {
+    pie: {
+      style: [...arcMarkAttribute],
+      attribute: []
+    },
+    label: CommonLabelStyleMap
+  },
+  funnel: {
+    funnel: {
+      style: [...rectMarkAttribute],
+      attribute: []
+    },
+    label: CommonLabelStyleMap
+  }
+};
+
+export const FieldLink = '_filedLink_';
+export const ValueLink = '_valueLink_';