fix: legend changeData problem, closes: #3561; fix: redo and undo wit… (

#3829) * fix: legend changeData problem, closes: #3561; fix: redo and undo with an image node, closes: #3782; * fix: call refreshPositions instead of positionsAnimate while there is no layout configuration; * test: update test cases
antvis · Aug 2, 2022 · 915297d · 915297d
1 parent 5407845
commit 915297d
Show file tree

Hide file tree

Showing 18 changed files with 237 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # ChangeLog
 
+#### 4.6.17
+
+- fix: legend changeData problem, closes: #3561;
+- fix: redo and undo with an image node, closes: #3782;
+- fix: call refreshPositions instead of positionsAnimate while there is no layout configuration;
+
 #### 4.6.16
 
 - feat: ID check;

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts
@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.6.16',
+  version: '0.6.17',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

diff --git a/packages/core/src/graph/graph.ts b/packages/core/src/graph/graph.ts
@@ -2247,12 +2247,11 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       };
     });
 
-    if (self.isAnimating()) {
-      self.stopAnimate();
-    }
+    self.stopAnimate();
 
     const canvas: ICanvas = self.get('canvas');
 
+    self.animating = true;
     canvas.animate(
       (ratio: number) => {
         each(toNodes, data => {
@@ -2379,7 +2378,9 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
   }
 
   public stopAnimate(): void {
-    this.get('canvas').stopAnimate();
+    if (this.isAnimating()) {
+      this.get('canvas').stopAnimate();
+    }
   }
 
   public isAnimating(): boolean {

diff --git a/packages/element/package.json b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@antv/g-base": "^0.5.1",
-    "@antv/g6-core": "0.6.16",
+    "@antv/g6-core": "0.6.17",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

diff --git a/packages/g6/package.json b/packages/g6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.6.16",
+  "version": "4.6.17",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.6.16"
+    "@antv/g6-pc": "0.6.17"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

diff --git 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.6.16';
+G6.version = '4.6.17';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.6.16';
+export const version = '4.6.17';
diff --git a/packages/pc/package.json b/packages/pc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -75,9 +75,9 @@
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-math": "^0.1.1",
     "@antv/g-svg": "^0.5.1",
-    "@antv/g6-core": "0.6.16",
-    "@antv/g6-element": "0.6.16",
-    "@antv/g6-plugin": "0.6.16",
+    "@antv/g6-core": "0.6.17",
+    "@antv/g6-element": "0.6.17",
+    "@antv/g6-plugin": "0.6.17",
     "@antv/hierarchy": "^0.6.7",
     "@antv/layout": "^0.2.5",
     "@antv/matrix-util": "^3.1.0-beta.3",

diff --git 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.6.16',
+  version: '0.6.17',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

diff --git a/packages/pc/src/graph/controller/layout.ts b/packages/pc/src/graph/controller/layout.ts
@@ -305,7 +305,7 @@ export default class LayoutController extends AbstractLayout {
       });
     } else {
       // 无布局配置
-      this.refreshLayout();
+      graph.refreshPositions();
       success?.();
     }
 

diff --git a/packages/pc/src/graph/graph.ts b/packages/pc/src/graph/graph.ts
@@ -415,10 +415,7 @@ export default class Graph extends AbstractGraph implements IGraph {
    */
   public downloadImage(name?: string, type?: DataUrlType, backgroundColor?: string): void {
     const self = this;
-
-    if (self.isAnimating()) {
-      self.stopAnimate();
-    }
+    self.stopAnimate();
 
     const canvas = self.get('canvas');
     const renderer = canvas.getRenderer();

diff --git a/packages/pc/tests/unit/graph/svg-spec.ts b/packages/pc/tests/unit/graph/svg-spec.ts
@@ -2533,10 +2533,10 @@ describe('plugins', () => {
     const gridDom = document.getElementsByClassName('g6-grid')[0] as HTMLElement;
     expect(gridDom).not.toBe(undefined);
     const minZoom = graph.get('minZoom');
-    const width = (500 * 80) / minZoom;
-    const height = (500 * 80) / minZoom;
-    expect(gridDom.style.width).toBe(`${width}px`);
-    expect(gridDom.style.height).toBe(`${height}px`);
+    const width = (500 * 80) / minZoom; // 2000000
+    const height = (500 * 80) / minZoom; // 2000000
+    expect(gridDom.style.width).toBe("2e+06px");
+    expect(gridDom.style.height).toBe("2e+06px");
     // graph.destroy();
     // const parentDom = gridDom.parentNode.parentNode;
     // expect(parentDom).toBe(null);

diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-plugin",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "description": "G6 Plugin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,8 +22,8 @@
     "@antv/g-base": "^0.5.1",
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-svg": "^0.5.2",
-    "@antv/g6-core": "0.6.16",
-    "@antv/g6-element": "0.6.16",
+    "@antv/g6-core": "0.6.17",
+    "@antv/g6-element": "0.6.17",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",

diff --git a/packages/plugin/src/legend/index.ts b/packages/plugin/src/legend/index.ts
@@ -349,18 +349,14 @@ export default class Legend extends Base {
         width: 200,
         height: 200,
       });
-      const rootGroup = lc.addGroup({ name: 'root' });
-      rootGroup.addGroup({ name: 'node-group' });
-      rootGroup.addGroup({ name: 'edge-group' });
-      // nodeStateStyles: {
-      //   legendActive,
-      //   legendInactive
-      // }
-      this.set('legendCanvas', lc);
+    } else {
+      lc.clear();
     }
-    const group = lc.find(e => e.get('name') === 'root');
-    const nodeGroup = group.find(e => e.get('name') === 'node-group');
-    const edgeGroup = group.find(e => e.get('name') === 'edge-group')
+    const group = lc.addGroup({ name: 'root' });
+    const nodeGroup = group.addGroup({ name: 'node-group' });
+    const edgeGroup = group.addGroup({ name: 'edge-group' });
+    this.set('legendCanvas', lc);
+
     const itemsData = this.get('itemsData');
     const itemTypes = ['nodes', 'edges'];
     const itemGroup = [nodeGroup, edgeGroup];

diff --git a/packages/plugin/src/toolBar/index.ts b/packages/plugin/src/toolBar/index.ts
@@ -257,6 +257,7 @@ export default class ToolBar extends Base {
             if (!array) return;
             array.forEach((model) => {
               const item = graph.findById(model.id);
+              delete model.id;
               graph.updateItem(item, model, false);
               if (item.getType() === 'combo') graph.updateCombo(item as ICombo)
             });
@@ -348,6 +349,7 @@ export default class ToolBar extends Base {
             if (!array) return;
             array.forEach((model) => {
               const item = graph.findById(model.id);
+              delete model.id;
               graph.updateItem(item, model, false);
               if (item.getType() === 'combo') graph.updateCombo(item as ICombo)
             });

diff --git a/packages/plugin/tests/unit/grid-spec.ts b/packages/plugin/tests/unit/grid-spec.ts
@@ -40,38 +40,38 @@ describe('grid', () => {
     const gridContainer: HTMLDivElement = container.childNodes[0] as HTMLDivElement;
 
     const minZoom = graph.get('minZoom');
-    const width = (800 * 80) / minZoom;
-    const height = (600 * 80) / minZoom;
-    expect(gridContainer.style.width).toBe(`${width}px`);
-    expect(gridContainer.style.height).toBe(`${height}px`);
-    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
-    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
+    const width = (800 * 80) / minZoom; // 3200000
+    const height = (600 * 80) / minZoom; // 2400000
+    expect(gridContainer.style.width).toBe('3.2e+06px'); // width
+    expect(gridContainer.style.height).toBe('2.4e+06px'); // height
+    expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
+    expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
     expect(gridContainer.style.backgroundImage).not.toEqual('');
 
     graph.translate(-100, -100);
 
     expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, -100, -100)');
-    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
-    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
+    expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
+    expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
 
     graph.zoom(0.5);
     expect(gridContainer.style.transform).toEqual('matrix(0.5, 0, 0, 0.5, -50, -50)');
-    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
-    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
+    expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
+    expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
 
     graph.get('group').resetMatrix();
 
     graph.translate(100, 100);
     expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 100, 100)');
-    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
-    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
+    expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
+    expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
 
     graph.addItem('node', { x: -200, y: 200 });
 
     graph.translate(100, 100);
     expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 200, 200)');
-    expect(gridContainer.style.left).toEqual(`-${width / 2}px`);
-    expect(gridContainer.style.top).toEqual(`-${height / 2}px`);
+    expect(gridContainer.style.left).toEqual('-1.6e+06px'); // -width . 2
+    expect(gridContainer.style.top).toEqual('-1.2e+06px'); // -height / 2
   });
   it('grid destroy', () => {
     const container = graph.get('container');