fix: 标注更新问题修复

common/changes/@visactor/vchart/fix-marker-updateSpec_2024-05-14-09-12.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: when marker's spec update, it should update when call vchart.updateSpec",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/vchart/src/component/marker/base-marker.ts

@@ -1,7 +1,7 @@
 import { DataSet, DataView } from '@visactor/vdataset';
 import type { Maybe } from '@visactor/vutils';
 // eslint-disable-next-line no-duplicate-imports
-import { array, isValid, isNil, isString, isEmpty, isArray } from '@visactor/vutils';
+import { array, isValid, isNil, isString, isEmpty, isArray, isEqual } from '@visactor/vutils';
 import type { IModelRenderOption, IModelSpecInfo } from '../../model/interface';
 import type { IRegion } from '../../region/interface';
 import type { ICartesianSeries } from '../../series/interface';
@@ -342,4 +342,14 @@ export abstract class BaseMarker<T extends IMarkerSpec> extends BaseComponent<T>
     }
     super.onLayoutStart(layoutRect, chartViewRect, ctx);
   }
+
+  _compareSpec(spec: T, prevSpec: T) {
+    const result = super._compareSpec(spec, prevSpec);
+    if (!isEqual(prevSpec, spec)) {
+      result.reRender = true;
+      result.reMake = true;
+      result.change = true;
+    }
+    return result;
+  }
 }

packages/vchart/src/component/marker/mark-line/base-mark-line.ts

@@ -115,7 +115,7 @@ export abstract class BaseMarkLine extends BaseMarker<IMarkLineSpec> implements
     return markLine as unknown as IGroup;
   }
 
-  protected _markerLayout() {
+  protected _getUpdateMarkerAttrs() {
     const spec = this._spec;
     const data = this._markerData;
     const startRelativeSeries = this._startRelativeSeries;
@@ -150,13 +150,18 @@ export abstract class BaseMarkLine extends BaseMarker<IMarkLineSpec> implements
         : markerComponentAttr.label?.text
     };
 
-    this._markerComponent?.setAttributes({
+    return {
       ...pointsAttr,
       label: labelAttrs as MarkLineComponent['attribute']['label'],
       limitRect,
       dx: this._layoutOffsetX,
       dy: this._layoutOffsetY
-    });
+    };
+  }
+
+  protected _markerLayout() {
+    const updateAttrs = this._getUpdateMarkerAttrs();
+    this._markerComponent?.setAttributes(updateAttrs);
   }
 
   protected _initDataView(): void {

packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts

@@ -74,42 +74,12 @@ export class CartesianMarkLine extends BaseMarkLine {
   }
 
   protected _markerLayout() {
-    super._markerLayout();
-    const spec = this._spec as any;
-    const data = this._markerData;
-    const startRelativeSeries = this._startRelativeSeries;
-    const endRelativeSeries = this._endRelativeSeries;
-    const relativeSeries = this._relativeSeries;
-
-    const { points } = this._computePointsAttr();
-
-    const seriesData = this._relativeSeries.getViewData().latestData;
-    const dataPoints =
-      data.latestData[0] && data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
-
-    let limitRect;
-    if (spec.clip || spec.label?.confine) {
-      const { minX, maxX, minY, maxY } = computeClipRange([
-        startRelativeSeries.getRegion(),
-        endRelativeSeries.getRegion(),
-        relativeSeries.getRegion()
-      ]);
-      limitRect = {
-        x: minX,
-        y: minY,
-        width: maxX - minX,
-        height: maxY - minY
-      };
-    }
-    const markerComponentAttr = this._markerComponent?.attribute ?? {};
-    const labelAttrs = {
-      ...markerComponentAttr.label,
-      text: this._spec.label.formatMethod
-        ? this._spec.label.formatMethod(dataPoints, seriesData)
-        : markerComponentAttr.label?.text
-    };
+    const updateAttrs = this._getUpdateMarkerAttrs();
 
     if ((this._spec as IStepMarkLineSpec).type === 'type-step') {
+      const startRelativeSeries = this._startRelativeSeries;
+      const endRelativeSeries = this._endRelativeSeries;
+
       const { multiSegment, mainSegmentIndex } = (this._spec as IStepMarkLineSpec).line || {};
       const { connectDirection, expandDistance = 0 } = this._spec as IStepMarkLineSpec;
 
@@ -142,6 +112,7 @@ export class CartesianMarkLine extends BaseMarkLine {
       } else {
         expandDistanceValue = expandDistance as number;
       }
+      const { points, label, limitRect } = updateAttrs;
 
       const joinPoints = getInsertPoints(
         (points as IPoint[])[0],
@@ -168,7 +139,7 @@ export class CartesianMarkLine extends BaseMarkLine {
           refY: 0
         };
       }
-
+      const markerComponentAttr = this._markerComponent?.attribute ?? {};
       this._markerComponent?.setAttributes({
         points: multiSegment
           ? [
@@ -178,7 +149,7 @@ export class CartesianMarkLine extends BaseMarkLine {
             ]
           : joinPoints,
         label: {
-          ...labelAttrs,
+          ...label,
           ...labelPositionAttrs,
           textStyle: {
             ...markerComponentAttr.label.textStyle,
@@ -193,13 +164,7 @@ export class CartesianMarkLine extends BaseMarkLine {
         dy: this._layoutOffsetY
       } as any);
     } else {
-      this._markerComponent?.setAttributes({
-        points,
-        label: labelAttrs as MarkLineComponent['attribute']['label'],
-        limitRect,
-        dx: this._layoutOffsetX,
-        dy: this._layoutOffsetY
-      } as any);
+      this._markerComponent?.setAttributes(updateAttrs);
     }
   }