diff --git a/common/changes/@visactor/vrender-components/fix-label-sync-state_2024-07-01-03-08.json b/common/changes/@visactor/vrender-components/fix-label-sync-state_2024-07-01-03-08.json new file mode 100644 index 000000000..8b141d622 --- /dev/null +++ b/common/changes/@visactor/vrender-components/fix-label-sync-state_2024-07-01-03-08.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: fix syncState of label when re-render stage\n\n", + "type": "none", + "packageName": "@visactor/vrender-components" + } + ], + "packageName": "@visactor/vrender-components", + "email": "dingling112@gmail.com" +} \ No newline at end of file diff --git a/common/changes/@visactor/vrender-core/fix-label-sync-state_2024-07-01-03-08.json b/common/changes/@visactor/vrender-core/fix-label-sync-state_2024-07-01-03-08.json new file mode 100644 index 000000000..1708a80cd --- /dev/null +++ b/common/changes/@visactor/vrender-core/fix-label-sync-state_2024-07-01-03-08.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: fix syncState of label when re-render stage\n\n", + "type": "none", + "packageName": "@visactor/vrender-core" + } + ], + "packageName": "@visactor/vrender-core", + "email": "dingling112@gmail.com" +} \ No newline at end of file diff --git a/packages/vrender-components/src/label/base.ts b/packages/vrender-components/src/label/base.ts index 8df6205a1..ee4e0a47b 100644 --- a/packages/vrender-components/src/label/base.ts +++ b/packages/vrender-components/src/label/base.ts @@ -93,8 +93,6 @@ export class LabelBase extends AbstractComponent { protected _idToPoint: Map; - onAfterLabelOverlap?: (bitmap: Bitmap) => void; - private _lastHover: IGraphic; private _lastSelect: IGraphic; @@ -181,6 +179,14 @@ export class LabelBase extends AbstractComponent { } } + if (isFunction(this.attribute.onAfterOverlapping)) { + this.attribute.onAfterOverlapping( + labels as Text[], + this.getRelatedGraphic.bind(this), + this._isCollectionBase ? (d: LabelItem) => this._idToPoint.get(d.id) : null + ); + } + if (labels && labels.length) { labels.forEach(label => { this._bindEvent(label); @@ -581,10 +587,6 @@ export class LabelBase extends AbstractComponent { !hasPlace && !hideOnHit && result.push(text); } - if (isFunction(this.onAfterLabelOverlap)) { - this.onAfterLabelOverlap(bitmap); - } - return result; } @@ -620,6 +622,7 @@ export class LabelBase extends AbstractComponent { } protected _renderWithAnimation(labels: (IText | IRichText)[]) { + const { syncState } = this.attribute; const currentTextMap: Map = new Map(); const prevTextMap: Map = this._graphicToText || new Map(); const texts = [] as (IText | IRichText)[]; @@ -636,6 +639,11 @@ export class LabelBase extends AbstractComponent { if (showLabelLine) { labelLine = this._createLabelLine(text as IText, relatedGraphic); } + + if (syncState) { + this.updateStatesOfLabels([labelLine ? { text, labelLine } : { text }], relatedGraphic.currentStates ?? []); + } + // TODO: add animate if (state === 'enter') { texts.push(text); @@ -675,6 +683,7 @@ export class LabelBase extends AbstractComponent { currentTextMap.set(textKey, prevLabel); const prevText = prevLabel.text; const { duration, easing } = this._animationConfig.update; + updateAnimation(prevText as Text, text as Text, this._animationConfig.update); if (prevLabel.labelLine && labelLine) { prevLabel.labelLine.animate().to(labelLine.attribute, duration, easing); @@ -701,6 +710,7 @@ export class LabelBase extends AbstractComponent { } protected _renderWithOutAnimation(labels: (IText | IRichText)[]) { + const { syncState } = this.attribute; const currentTextMap: Map = new Map(); const prevTextMap: Map = this._graphicToText || new Map(); const texts = [] as (IText | IRichText)[]; @@ -716,6 +726,10 @@ export class LabelBase extends AbstractComponent { labelLine = this._createLabelLine(text as IText, relatedGraphic); } + if (syncState) { + this.updateStatesOfLabels([labelLine ? { text, labelLine } : { text }], relatedGraphic.currentStates ?? []); + } + if (state === 'enter') { texts.push(text); currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text }); @@ -728,6 +742,7 @@ export class LabelBase extends AbstractComponent { const prevLabel = prevTextMap.get(textKey); prevTextMap.delete(textKey); currentTextMap.set(textKey, prevLabel); + prevLabel.text.setAttributes(text.attribute as any); if (prevLabel.labelLine && labelLine) { prevLabel.labelLine.setAttributes(labelLine.attribute); @@ -745,6 +760,20 @@ export class LabelBase extends AbstractComponent { this._graphicToText = currentTextMap; } + private updateStatesOfLabels(labels: LabelContent[], currentStates?: string[]) { + labels.forEach(label => { + if (label) { + if (label.text) { + label.text.useStates(currentStates); + } + + if (label.labelLine) { + label.labelLine.useStates(currentStates); + } + } + }); + } + protected _handleRelatedGraphicSetState = (e: any) => { if ( e.detail?.type === AttributeUpdateType.STATE || @@ -753,17 +782,7 @@ export class LabelBase extends AbstractComponent { const currentStates = e.target?.currentStates ?? []; const labels = this._isCollectionBase ? [...this._graphicToText.values()] : [this._graphicToText.get(e.target)]; - labels.forEach(label => { - if (label) { - if (label.text) { - label.text.useStates(currentStates); - } - - if (label.labelLine) { - label.labelLine.useStates(currentStates); - } - } - }); + this.updateStatesOfLabels(labels, currentStates); } }; diff --git a/packages/vrender-components/src/label/type.ts b/packages/vrender-components/src/label/type.ts index b62565ff2..9dc92c79e 100644 --- a/packages/vrender-components/src/label/type.ts +++ b/packages/vrender-components/src/label/type.ts @@ -126,6 +126,15 @@ export interface BaseLabelAttrs extends IGroupGraphicAttribute { getRelatedGraphic: (data: LabelItem) => IGraphic, getRelatedPoint?: (data: LabelItem) => IPointLike ) => (IText | IRichText)[]; + /** + * 防重叠计算完成后的回调函数 + * @since 1.19.16 + */ + onAfterOverlapping?: ( + labels: (IText | IRichText)[], + getRelatedGraphic: (data: LabelItem) => IGraphic, + getRelatedPoint?: (data: LabelItem) => IPointLike + ) => void; /** * 关闭交互效果 * @default false diff --git a/packages/vrender-core/src/common/utils.ts b/packages/vrender-core/src/common/utils.ts index 0dc2ec91e..2b14a809d 100644 --- a/packages/vrender-core/src/common/utils.ts +++ b/packages/vrender-core/src/common/utils.ts @@ -214,6 +214,7 @@ export function pointEqual(pointA: IPointLike, pointB: IPointLike): boolean { export function pointInterpolation(pointA: IPointLike, pointB: IPointLike, ratio: number): IPointLike { const { x, y } = pointAt(pointA.x, pointA.y, pointB.x, pointB.y, ratio); const { x: x1, y: y1 } = pointAt(pointA.x1, pointA.y1, pointB.x1, pointB.y1, ratio); + const point = new Point(x as number, y as number, x1, y1); point.defined = pointB.defined; return point;