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
2024-12-04 20:59:15 +08:00 · 2022-08-02 20:19:32 +08:00 · 2022-08-02 20:19:32 +08:00 · 915297d631
commit 915297d631
parent 5407845e42
18 changed files with 237 additions and 62 deletions
--- 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;
--- 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",
--- 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',
--- 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();
-    }

    const canvas: ICanvas = self.get('canvas');

+    self.animating = true;
    canvas.animate(
      (ratio: number) => {
        each(toNodes, data => {
@ -2379,8 +2378,10 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
  }

  public stopAnimate(): void {
+    if (this.isAnimating()) {
      this.get('canvas').stopAnimate();
    }
+  }

  public isAnimating(): boolean {
    return this.animating;
--- 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": {
--- 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",
--- 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';
--- 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",
--- 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',
--- 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?.();
    }

--- 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();
-    }

    const canvas = self.get('canvas');
    const renderer = canvas.getRenderer();
--- 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);
--- 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",
--- 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];
--- 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)
            });
--- 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');
--- a/packages/plugin/tests/unit/legend-spec.ts
+++ b/packages/plugin/tests/unit/legend-spec.ts
@ -342,5 +342,178 @@ describe('legend', () => {
      done();
    }, 500);
  });
+  it('legend changeData', () => {
+    const typeConfigs = {
+      'type1': {
+        type: 'circle',
+        size: 5,
+        style: {
+          fill: '#5B8FF9'
+        }
+      },
+      'type2': {
+        type: 'circle',
+        size: 20,
+        style: {
+          fill: '#5AD8A6'
+        }
+      },
+      'type3': {
+        type: 'rect',
+        size: [10, 10],
+        style: {
+          fill: '#5D7092'
+        }
+      },
+      'eType1': {
+        type: 'line',
+        style: {
+          width: 20,
+          stroke: '#F6BD16',
+        }
+      },
+      'eType2': {
+        type: 'cubic',
+      },
+      'eType3': {
+        type: 'quadratic',
+        style: {
+          width: 25,
+          stroke: '#6F5EF9'
+        }
+      }
+    }
+    const legendData = {
+      nodes: [{
+        id: 'type1',
+        label: 'node-type1',
+        order: 4,
+        ...typeConfigs['type1']
+      }, {
+        id: 'type2',
+        label: 'node-type2',
+        order: 0,
+        ...typeConfigs['type2']
+      }, {
+        id: 'type3',
+        label: 'node-type3',
+        order: 2,
+        ...typeConfigs['type3']
+      }],
+      edges: [{
+        id: 'eType1',
+        label: 'edge-type1',
+        order: 2,
+        ...typeConfigs['eType1']
+      }, {
+        id: 'eType2',
+        label: 'edge-type2',
+        ...typeConfigs['eType2']
+      }, {
+        id: 'eType3',
+        label: 'edge-type3',
+        ...typeConfigs['eType3']
+      }]
+    }
+    const legend = new Legend({
+      data: legendData,
+      align: 'center',
+      layout: 'horizontal', // vertical
+      position: 'bottom-right',
+      vertiSep: 12,
+      horiSep: 24,
+      offsetY: -24,
+      padding: [4, 16, 8, 16],
+      containerStyle: {
+        fill: '#ccc',
+        lineWidth: 1
+      },
+      title: 'Legend',
+      titleConfig: {
+        position: 'center',
+        offsetX: 0,
+        offsetY: 12,
+      },
+      filter: {
+        enable: true,
+        multiple: true,
+        trigger: 'click',
+        graphActiveState: 'activeByLegend',
+        graphInactiveState: 'inactiveByLegend',
+        filterFunctions: {
+          'type1': (d) => {
+            if (d.legendType === 'type1') return true;
+            return false
+          },
+          'type2': (d) => {
+            if (d.legendType === 'type2') return true;
+            return false
+          },
+          'type3': (d) => {
+            if (d.legendType === 'type3') return true;
+            return false
+          },
+          'eType1': (d) => {
+            if (d.legendType === 'eType1') return true;
+            return false
+          },
+          'eType2': (d) => {
+            if (d.legendType === 'eType2') return true;
+            return false
+          },
+          'eType3': (d) => {
+            if (d.legendType === 'eType3') return true;
+            return false
+          },
+        }
+      }
+    });
+
+    const graph = new G6.Graph({
+      container: div,
+      width: 400,
+      height: 400,
+      plugins: [legend],
+      modes: {
+        default: ['drag-canvas', 'zoom-canvas', 'drag-node']
+      },
+      edgeStateStyles: {
+        active: {
+          lineWidth: 3
+        },
+        inactive: {
+          opacity: 0.5
+        }
+      }
+    });
+    graph.read(data);
+    const legendCanvas = legend.get('legendCanvas');
+    let legendRoot = legendCanvas.find(e => e.get('name') === 'root');
+    let nodesGroup = legendRoot.find(e => e.get('name') === 'node-group')
+    let edgesGroup = legendRoot.find(e => e.get('name') === 'edge-group')
+    expect(nodesGroup.get('children').length).toBe(3);
+    expect(edgesGroup.get('children').length).toBe(3);
+
+    legend.changeData({
+      nodes: [{
+        id: 'type1',
+        label: 'node-type1',
+        order: 4,
+        ...typeConfigs['type1']
+      }],
+      edges: [{
+        id: 'eType1',
+        label: 'edge-type1',
+        order: 2,
+        ...typeConfigs['eType1']
+      }]
+    });
+    legendRoot = legendCanvas.find(e => e.get('name') === 'root');
+    nodesGroup = legendRoot.find(e => e.get('name') === 'node-group')
+    edgesGroup = legendRoot.find(e => e.get('name') === 'edge-group')
+    expect(nodesGroup.get('children').length).toBe(1);
+    expect(edgesGroup.get('children').length).toBe(1);
+    graph.destroy();
+  });
 });

--- a/packages/site/package.json
+++ b/packages/site/package.json
@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "@antv/g6-site",
-  "version": "4.6.16",
+  "version": "4.6.17",
  "description": "G6 sites deployed on gh-pages",
  "keywords": [
    "antv",
@ -36,7 +36,7 @@
  "dependencies": {
    "@ant-design/icons": "^4.0.6",
    "@antv/chart-node-g6": "^0.0.3",
-    "@antv/g6": "4.6.16",
+    "@antv/g6": "4.6.17",
    "@antv/gatsby-theme-antv": "1.1.15",
    "@antv/util": "^2.0.9",
    "@antv/vis-predict-engine": "^0.1.1",