Fix/label sync state

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": "[email protected]"
+}

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": "[email protected]"
+}

packages/vrender-components/src/label/base.ts

@@ -93,8 +93,6 @@ export class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {
 
   protected _idToPoint: Map<string, IPointLike>;
 
-  onAfterLabelOverlap?: (bitmap: Bitmap) => void;
-
   private _lastHover: IGraphic;
   private _lastSelect: IGraphic;
 
@@ -181,6 +179,14 @@ export class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {
       }
     }
 
+    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<T extends BaseLabelAttrs> extends AbstractComponent<T> {
       !hasPlace && !hideOnHit && result.push(text);
     }
 
-    if (isFunction(this.onAfterLabelOverlap)) {
-      this.onAfterLabelOverlap(bitmap);
-    }
-
     return result;
   }
 
@@ -620,6 +622,7 @@ export class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {
   }
 
   protected _renderWithAnimation(labels: (IText | IRichText)[]) {
+    const { syncState } = this.attribute;
     const currentTextMap: Map<any, { text: IText | IRichText; labelLine?: ILine }> = new Map();
     const prevTextMap: Map<any, { text: IText | IRichText; labelLine?: ILine }> = this._graphicToText || new Map();
     const texts = [] as (IText | IRichText)[];
@@ -636,6 +639,11 @@ export class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {
         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<T extends BaseLabelAttrs> extends AbstractComponent<T> {
           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<T extends BaseLabelAttrs> extends AbstractComponent<T> {
   }
 
   protected _renderWithOutAnimation(labels: (IText | IRichText)[]) {
+    const { syncState } = this.attribute;
     const currentTextMap: Map<any, LabelContent> = new Map();
     const prevTextMap: Map<any, LabelContent> = this._graphicToText || new Map();
     const texts = [] as (IText | IRichText)[];
@@ -716,6 +726,10 @@ export class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {
           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<T extends BaseLabelAttrs> extends AbstractComponent<T> {
           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<T extends BaseLabelAttrs> extends AbstractComponent<T> {
     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<T extends BaseLabelAttrs> extends AbstractComponent<T> {
       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);
     }
   };
 

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

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;