diff --git a/common/changes/@visactor/vchart/fix-marker-updateSpec_2024-05-14-09-12.json b/common/changes/@visactor/vchart/fix-marker-updateSpec_2024-05-14-09-12.json new file mode 100644 index 0000000000..402c3ec00c --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/vchart/src/component/marker/base-marker.ts b/packages/vchart/src/component/marker/base-marker.ts index a02918f3a7..8771f7bd63 100644 --- a/packages/vchart/src/component/marker/base-marker.ts +++ b/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 extends BaseComponent } 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; + } } diff --git a/packages/vchart/src/component/marker/mark-line/base-mark-line.ts b/packages/vchart/src/component/marker/mark-line/base-mark-line.ts index 8aee5b4642..450787710a 100644 --- a/packages/vchart/src/component/marker/mark-line/base-mark-line.ts +++ b/packages/vchart/src/component/marker/mark-line/base-mark-line.ts @@ -115,7 +115,7 @@ export abstract class BaseMarkLine extends BaseMarker 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 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 { diff --git a/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts b/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts index c437f5b41b..a6d9bf5807 100644 --- a/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts +++ b/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); } }