From 51b42d0668930546aa013930cc4132cf7063542f Mon Sep 17 00:00:00 2001
From: xiaoiver <yuqi.pyq@antgroup.com>
Date: Wed, 1 Nov 2023 10:50:02 +0800
Subject: [PATCH] Fix 1568 (#1569)

* fix: insertBefore should use correct position #1568

* chore: commit changeset
---
 .changeset/new-pans-cross.md       |  5 +++
 __tests__/unit/dom/element.spec.ts | 58 ++++++++++++++++++++++++++++++
 packages/g-lite/src/dom/Element.ts | 10 +++++-
 3 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/new-pans-cross.md

diff --git a/.changeset/new-pans-cross.md b/.changeset/new-pans-cross.md
new file mode 100644
index 000000000..8d251eecb
--- /dev/null
+++ b/.changeset/new-pans-cross.md
@@ -0,0 +1,5 @@
+---
+'@antv/g-lite': patch
+---
+
+Use correct position when insertBefore.
diff --git a/__tests__/unit/dom/element.spec.ts b/__tests__/unit/dom/element.spec.ts
index 1359e1057..5e1e8dac6 100644
--- a/__tests__/unit/dom/element.spec.ts
+++ b/__tests__/unit/dom/element.spec.ts
@@ -130,6 +130,64 @@ describe('DOM Element API', () => {
     expect(group1.lastChild).toBe(group3);
   });
 
+  it('should insertBefore correctly', () => {
+    const group1 = new Element();
+    const group2 = new Element();
+    const group3 = new Element();
+    const group4 = new Element();
+    const group5 = new Element();
+
+    // 2, 4, 3
+    group1.append(group2, group3);
+    group1.insertBefore(group4, group3);
+    expect(group1.childNodes.length).toBe(3);
+    expect(group1.firstChild).toBe(group2);
+    expect(group1.childNodes[1]).toBe(group4);
+    expect(group1.lastChild).toBe(group3);
+    group1.removeChildren();
+    expect(group1.childNodes.length).toBe(0);
+
+    // 4, 2, 3
+    group1.append(group2, group3);
+    group1.insertBefore(group4, group2);
+    expect(group1.childNodes.length).toBe(3);
+    expect(group1.firstChild).toBe(group4);
+    expect(group1.childNodes[1]).toBe(group2);
+    expect(group1.lastChild).toBe(group3);
+    group1.removeChildren();
+    expect(group1.childNodes.length).toBe(0);
+
+    // 2, 3, 4 -> 2, 4, 3
+    group1.append(group2, group3, group4);
+    group1.insertBefore(group4, group3);
+    expect(group1.childNodes.length).toBe(3);
+    expect(group1.firstChild).toBe(group2);
+    expect(group1.childNodes[1]).toBe(group4);
+    expect(group1.lastChild).toBe(group3);
+    group1.removeChildren();
+    expect(group1.childNodes.length).toBe(0);
+
+    // 2, 3, 4
+    group1.append(group2, group3);
+    group1.insertBefore(group4, null);
+    expect(group1.childNodes.length).toBe(3);
+    expect(group1.firstChild).toBe(group2);
+    expect(group1.childNodes[1]).toBe(group3);
+    expect(group1.lastChild).toBe(group4);
+    group1.removeChildren();
+    expect(group1.childNodes.length).toBe(0);
+
+    // 2, 3, 4
+    group1.append(group2, group3);
+    group1.insertBefore(group4, group5); // non-existed node
+    expect(group1.childNodes.length).toBe(3);
+    expect(group1.firstChild).toBe(group2);
+    expect(group1.childNodes[1]).toBe(group3);
+    expect(group1.lastChild).toBe(group4);
+    group1.removeChildren();
+    expect(group1.childNodes.length).toBe(0);
+  });
+
   it('should replaceWith correctly', () => {
     const group1 = new Element();
     const group2 = new Element();
diff --git a/packages/g-lite/src/dom/Element.ts b/packages/g-lite/src/dom/Element.ts
index 2285cd0eb..c4c2495bb 100644
--- a/packages/g-lite/src/dom/Element.ts
+++ b/packages/g-lite/src/dom/Element.ts
@@ -234,8 +234,16 @@ export class Element<
     if (!refChild) {
       this.appendChild(newChild);
     } else {
+      if (newChild.parentElement) {
+        newChild.parentElement.removeChild(newChild);
+      }
+
       const index = this.childNodes.indexOf(refChild as IChildNode);
-      this.appendChild(newChild, index - 1);
+      if (index === -1) {
+        this.appendChild(newChild);
+      } else {
+        this.appendChild(newChild, index);
+      }
     }
     return newChild;
   }