fix: destroy custom label before render (#4146)

antvis · Jan 10, 2024 · 281209a · 281209a
1 parent 8169d42
commit 281209a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/packages/x6/src/graph/options.ts b/packages/x6/src/graph/options.ts
@@ -54,7 +54,9 @@ export namespace Options {
     guard: (e: Dom.EventObject, view?: CellView | null) => boolean
 
     onPortRendered?: (args: OnPortRenderedArgs) => void
-    onEdgeLabelRendered?: (args: OnEdgeLabelRenderedArgs) => void
+    onEdgeLabelRendered?: (
+      args: OnEdgeLabelRenderedArgs,
+    ) => undefined | ((args: OnEdgeLabelRenderedArgs) => void)
 
     createCellView?: (
       this: Graph,

diff --git a/packages/x6/src/view/edge.ts b/packages/x6/src/view/edge.ts
@@ -51,6 +51,9 @@ export class EdgeView<
   protected labelContainer: Element | null
   protected labelCache: { [index: number]: Element }
   protected labelSelectors: { [index: number]: Markup.Selectors }
+  protected labelDestroyFn: {
+    [index: number]: (args: GraphOptions.OnEdgeLabelRenderedArgs) => void
+  } = {}
 
   protected get [Symbol.toStringTag]() {
     return EdgeView.toStringTag
@@ -162,17 +165,42 @@ export class EdgeView<
         const selectors = this.labelSelectors[i]
         const onEdgeLabelRendered = this.graph.options.onEdgeLabelRendered
         if (onEdgeLabelRendered) {
-          onEdgeLabelRendered({
+          const fn = onEdgeLabelRendered({
             edge,
             label,
             container,
             selectors,
           })
+          if (fn) {
+            this.labelDestroyFn[i] = fn
+          }
         }
       }
     }
   }
 
+  protected destroyCustomizeLabels() {
+    const labels = this.cell.labels
+
+    if (this.labelCache && this.labelSelectors && this.labelDestroyFn) {
+      for (let i = 0, n = labels.length; i < n; i += 1) {
+        const fn = this.labelDestroyFn[i]
+        const container = this.labelCache[i]
+        const selectors = this.labelSelectors[i]
+        if (fn && container && selectors) {
+          fn({
+            edge: this.cell,
+            label: labels[i],
+            container,
+            selectors,
+          })
+        }
+      }
+    }
+
+    this.labelDestroyFn = {}
+  }
+
   protected renderLabels() {
     const edge = this.cell
     const labels = edge.getLabels()
@@ -241,6 +269,8 @@ export class EdgeView<
   }
 
   onLabelsChange(options: any = {}) {
+    this.destroyCustomizeLabels()
+
     if (this.shouldRerenderLabels(options)) {
       this.renderLabels()
     } else {