fix: tooltip with wrong duplicated child DOM nodes; (#3507)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # ChangeLog
 
+#### 4.5.5
+
+- fix: tooltip with wrong duplicated child DOM nodes;
+
 #### 4.5.4
 
 - feat: tooltip plugin supports dynamic dom configurations;

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

packages/core/src/global.ts

@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.5.4',
+  version: '0.5.5',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

packages/element/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@antv/g-base": "^0.5.1",
-    "@antv/g6-core": "0.5.4",
+    "@antv/g6-core": "*",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

packages/g6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.5.4",
+  "version": "4.5.5",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.5.4"
+    "@antv/g6-pc": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

packages/g6/src/index.ts

@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.5.4';
+G6.version = '4.5.5';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.5.4';
+export const version = '4.5.5';

packages/pc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -74,9 +74,9 @@
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-math": "^0.1.1",
     "@antv/g-svg": "^0.5.1",
-    "@antv/g6-core": "0.5.4",
-    "@antv/g6-plugin": "0.5.4",
-    "@antv/g6-element": "0.5.4",
+    "@antv/g6-core": "*",
+    "@antv/g6-plugin": "*",
+    "@antv/g6-element": "*",
     "@antv/algorithm": "^0.1.8",
     "@antv/hierarchy": "^0.6.7",
     "@antv/layout": "^0.1.22",

packages/pc/src/global.ts

@@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)';
 const colorSet = getColorsWithSubjectColor(subjectColor, backColor);
 
 export default {
-  version: '0.5.4',
+  version: '0.5.5',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

packages/pc/src/graph/graph.ts

@@ -254,7 +254,7 @@ export default class Graph extends AbstractGraph implements IGraph {
     const height = bbox.height;
     const width = bbox.width;
     const renderer = this.get('renderer');
-    const vContainerDOM: HTMLDivElement = createDom('<id="virtual-image"></div>');
+    const vContainerDOM: HTMLDivElement = createDom('<div id="virtual-image"></div>');
 
     const backgroundColor = imageConfig ? imageConfig.backgroundColor : undefined;
     let padding = imageConfig ? imageConfig.padding : undefined;
@@ -316,7 +316,7 @@ export default class Graph extends AbstractGraph implements IGraph {
         let compositeOperation;
         if (backgroundColor) {
           const pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
-          try { 
+          try {
             imageData = context.getImageData(0, 0, vWidth * pixelRatio, vHeight * pixelRatio);
             compositeOperation = context.globalCompositeOperation;
             context.globalCompositeOperation = 'destination-over';
@@ -352,7 +352,7 @@ export default class Graph extends AbstractGraph implements IGraph {
     const height = bbox.height;
     const width = bbox.width;
     const renderer = this.get('renderer');
-    const vContainerDOM: HTMLDivElement = createDom('<id="virtual-image"></div>');
+    const vContainerDOM: HTMLDivElement = createDom('<div id="virtual-image"></div>');
     const watermarker = document.querySelector('.g6-graph-watermarker') as HTMLElement;
 
     const backgroundColor = imageConfig ? imageConfig.backgroundColor : undefined;

packages/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-plugin",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "G6 Plugin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@antv/g-base": "^0.5.1",
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-svg": "^0.5.2",
-    "@antv/g6-core": "0.5.4",
+    "@antv/g6-core": "*",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",

packages/plugin/src/tooltip/index.ts

@@ -164,8 +164,8 @@ export default class Tooltip extends Base {
     this.currentTarget = null;
   }
 
-  clearContainer () {
-    const container = this.get('container');
+  clearContainer() {
+    const container = this.get('tooltip');
     if (container) {
       container.innerHTML = ''
     }

packages/plugin/tests/unit/tooltip-spec.ts

@@ -205,7 +205,7 @@ describe('tooltip', () => {
     const expectCanvasXY2 = graph.getCanvasByPoint(expectPoint2.x, expectPoint2.y);
     expectCanvasXY2.x += graphContainer.offsetLeft + offsetX;
     expectCanvasXY2.y += graphContainer.offsetTop + offsetY;
-    
+
     // 此时超出了下边界和右边界
     const bbox = dom.getBoundingClientRect();
     expectCanvasXY2.x -= bbox.width + offsetX;
@@ -564,7 +564,8 @@ describe('tooltip mouse out of view', () => {
     const graph = new G6.Graph({
       container: div,
       width: 500,
-      height: 500,fitCenter: true, // 图居中
+      height: 500,
+      fitCenter: true, // 图居中
       enabledStack: true, // 设置为true，启用 redo & undo 栈功能
       defaultNode: {
         type: 'pai-studio-node',
@@ -770,7 +771,7 @@ describe('tooltip mouse out of view', () => {
             },
             properties: [],
           },
-    
+
           {
             id: '9a69c538b1eb4a3583e0dsfsdff4bc4e88d2110',
             label: '逻辑回归二分类预发',
@@ -1081,5 +1082,55 @@ describe('tooltip mouse out of view', () => {
 
     graph.data(d.Content);
     graph.render();
+
+    graph.destroy();
   })
 });
+
+describe('tooltip updated dynamically', () => {
+
+  it('tooltip update dynamically', () => {
+    const outDiv = document.createElement('div');
+    outDiv.style.width = '180px';
+    outDiv.innerHTML = `before-update`;
+    const tooltip = new Tooltip({
+      offsetX: 10,
+      getContent(e) {
+        return outDiv;
+      },
+    });
+
+    const graph = new G6.Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      plugins: [tooltip],
+      modes: {
+        default: ['drag-node', 'zoom-canvas', 'drag-canvas'],
+      },
+      defaultNode: {
+        type: 'rect',
+      },
+      defaultEdge: {
+        style: {
+          lineAppendWidth: 20,
+        },
+      },
+    });
+
+    graph.data(data);
+    graph.render();
+
+    graph.emit('node:mouseenter', { item: graph.getNodes()[0] });
+    expect(tooltip.get('tooltip').style.visibility).toEqual('visible');
+
+    expect(tooltip.get('tooltip').childNodes[0].innerHTML).toEqual('before-update');
+
+    outDiv.innerHTML = `updated`;
+    expect(tooltip.get('tooltip').childNodes[0].innerHTML).toEqual('updated');
+
+    graph.destroy();
+
+
+  });
+})

packages/site/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/g6-site",
-  "version": "4.5.4",
+  "version": "4.5.5",
   "description": "G6 sites deployed on gh-pages",
   "keywords": [
     "antv",