diff --git a/CHANGELOG.md b/CHANGELOG.md index 94f87d61264..4005b3011a7 100644 --- a/CHANGELOG.md +++ b/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; diff --git a/packages/core/package.json b/packages/core/package.json index 1668d6fb78d..249b15b527b 100644 --- a/packages/core/package.json +++ b/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", diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts index f04f7ee7141..de2432b9df3 100644 --- a/packages/core/src/global.ts +++ b/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', diff --git a/packages/element/package.json b/packages/element/package.json index 9336db9ea67..c9415af8f4c 100644 --- a/packages/element/package.json +++ b/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": { diff --git a/packages/g6/package.json b/packages/g6/package.json index 3f8c3da361e..c2958f37469 100644 --- a/packages/g6/package.json +++ b/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", diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts index 2ed24582f99..5edab8d4b31 100644 --- a/packages/g6/src/index.ts +++ b/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'; diff --git a/packages/pc/package.json b/packages/pc/package.json index 60e47a681f1..4867948b8a8 100644 --- a/packages/pc/package.json +++ b/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", diff --git a/packages/pc/src/global.ts b/packages/pc/src/global.ts index 8aa3a5ed281..bc0c0dd05ed 100644 --- a/packages/pc/src/global.ts +++ b/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', diff --git a/packages/pc/src/graph/graph.ts b/packages/pc/src/graph/graph.ts index 8a8b8440d90..4c1257e8b9a 100644 --- a/packages/pc/src/graph/graph.ts +++ b/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(''); + const vContainerDOM: HTMLDivElement = createDom('
'); 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(''); + const vContainerDOM: HTMLDivElement = createDom('
'); const watermarker = document.querySelector('.g6-graph-watermarker') as HTMLElement; const backgroundColor = imageConfig ? imageConfig.backgroundColor : undefined; diff --git a/packages/plugin/package.json b/packages/plugin/package.json index 2d621489d85..fadd0c44ae1 100644 --- a/packages/plugin/package.json +++ b/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", diff --git a/packages/plugin/src/tooltip/index.ts b/packages/plugin/src/tooltip/index.ts index d2da7f91c2a..0443f90665b 100644 --- a/packages/plugin/src/tooltip/index.ts +++ b/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 = '' } diff --git a/packages/plugin/tests/unit/tooltip-spec.ts b/packages/plugin/tests/unit/tooltip-spec.ts index 0879d091c4f..6ee68a1408e 100644 --- a/packages/plugin/tests/unit/tooltip-spec.ts +++ b/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(); + + + }); +}) diff --git a/packages/site/package.json b/packages/site/package.json index dafc3dd9e36..5ac0ee59ad2 100644 --- a/packages/site/package.json +++ b/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",