feat: add freeze size plugin

demos/gallery-graphanalyzer.html

@@ -92,16 +92,6 @@
         height: 500,
       });
       graph.read(Util.cloneDeep(data));
-      // graph.getNodes().forEach(node=>{
-      //   graph.toFront(node);
-      //   // node.getGraphicGroup().toFront();
-      // });
-      // graph.on('afterchange', ()=>{
-      //   graph.getNodes().forEach(node=>{
-      //     // graph.toFront(node);
-      //     node.getGraphicGroup().toFront();
-      //   });
-      // });
       const minimap = document.getElementById('minimap');
       // const legend = document.getElementById('legend');
       if (minimap !== undefined) minimap.style.display = 'none';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "2.1.0-beta.8",
+  "version": "2.1.0-beta.9",
   "description": "graph visualization frame work",
   "main": "build/g6.js",
   "homepage": "https://github.com/antvis/g6",
@@ -86,7 +86,7 @@
     "ci": "npm run lint && npm run test",
     "copy": "node ./bin/cp-dist.js",
     "coverage": "npm run coverage-generator && npm run coverage-viewer",
-    "coverage-generator": "torch --compile --coverage --renderer --recursive --source-pattern index.js,src/**/*.js test/unit/plugins/tool.mapper-spec.js",
+    "coverage-generator": "torch --compile --coverage --renderer --recursive --source-pattern index.js,src/**/*.js test/unit/",
     "coverage-viewer": "torch-coverage",
     "demos": "electron ./demos/app.js",
     "demos-web": "node ./demos/app.js --web --port 2046",
@@ -100,7 +100,7 @@
     "screenshot": "node ./bin/screenshot.js",
     "start": "npm run dev",
     "test": "torch --compile --renderer --recursive ./test/unit",
-    "test-live": "torch --compile --interactive --watch --recursive ./test/unit/",
+    "test-live": "torch --compile --interactive --watch --recursive ./test/unit/graph-spec.js",
     "watch": "webpack --config webpack-dev.config.js",
     "win-dev": "node ./bin/win-dev.js"
   },

plugins/template.maxSpanningForest/index.js

@@ -18,6 +18,7 @@ require('../tool.fisheye/');
 require('../util.extractSubgraph/');
 require('../edge.quadraticCurve/');
 require('../behaviour.analysis/');
+require('../tool.freezeSize/');
 
 class Plugin {
   constructor(options) {
@@ -84,7 +85,6 @@ class Plugin {
   init() {
     const graph = this.graph;
 
-    const highlighter = new G6.Plugins['tool.highlightSubgraph']();
     if (this.fisheye) {
       const fisheye = new G6.Plugins['tool.fisheye']({
         radius: 200
@@ -95,7 +95,19 @@ class Plugin {
       const textDisplay = new G6.Plugins['tool.textDisplay']();
       graph.addPlugin(textDisplay);
     }
+    const highlighter = new G6.Plugins['tool.highlightSubgraph']();
+    const freezeSize = new G6.Plugins['tool.freezeSize']();
     graph.addPlugin(highlighter);
+    graph.addPlugin(freezeSize);
+    graph.on('afteritemdraw', ({ item }) => {
+      const label = item.getLabel();
+      if (label) {
+        label.set('freezePoint', {
+          x: 0,
+          y: 0
+        });
+      }
+    });
     graph.on('beforeinit', () => {
       let layout = graph.get('layout');
       if (!layout) {

plugins/tool.freezeSize/index.js

@@ -0,0 +1,53 @@
+/**
+ * @fileOverview freeze size zoom
+ * @author huangtonger@aliyun.com
+ */
+
+const G6 = require('@antv/g6');
+const Util = G6.Util;
+
+class Plugin {
+  constructor(options) {
+    Util.mix(this, options);
+    this._freezeElements = {};
+  }
+  init() {
+    const graph = this.graph;
+    graph.on('afterchange', () => {
+      this._stashFreezeElement();
+    });
+    graph.on('afterzoom', () => {
+      this.freezeSize();
+    });
+  }
+  _stashFreezeElement() {
+    const graph = this.graph;
+    const canvas = graph.getCanvas();
+    const freezeElements = this._freezeElements;
+    canvas.deepEach(child => {
+      if (child.get('freezePoint')) {
+        freezeElements[child.gid] = child;
+      }
+    });
+  }
+  freezeSize() {
+    const freezeElements = this._freezeElements;
+    const graph = this.graph;
+    Util.each(freezeElements, freezeElement => {
+      const freezePoint = freezeElement.get('freezePoint');
+      const freezable = graph.get('freezable');
+      const scale = graph.getScale();
+      if (freezable !== false && freezeElement.isShape && freezePoint && freezeElement.get('visible')) {
+        freezeElement.resetMatrix();
+        freezeElement.transform([
+          [ 't', -freezePoint.x, -freezePoint.y ],
+          [ 's', 1 / scale, 1 / scale ],
+          [ 't', freezePoint.x, freezePoint.y ]
+        ]);
+      }
+    });
+  }
+}
+
+G6.Plugins['tool.freezeSize'] = Plugin;
+module.exports = Plugin;

plugins/tool.textDisplay/index.js

@@ -26,15 +26,12 @@ class Plugin {
     const nodes = graph.getNodes();
     Util.each(nodes, node => {
       const label = node.getLabel();
-      const model = node.getModel();
       const labelBox = label.getBBox();
-      const labelWidth = labelBox.maxX - labelBox.minX;
+      const scale = graph.getScale();
+      const labelWidth = (labelBox.maxX - labelBox.minX) * (1 / scale);
       const nodeBox = node.getBBox();
-      let nodeWidth = nodeBox.maxX - nodeBox.minX;
+      const nodeWidth = nodeBox.maxX - nodeBox.minX;
-      if (model.size === undefined) {
+
-        const nodeBox = node.getBBox();
-        nodeWidth = nodeBox.maxX - nodeBox.minX;
-      }
       if (labelWidth === 0) return;
       const ratio = labelWidth / nodeWidth;
       if (ratio > 2) {

src/mixin/fit-view.js

@@ -189,6 +189,12 @@ Mixin.AUGMENT = {
     const rootGroup = this.get('_rootGroup');
     return rootGroup.getMatrix();
   },
+  /**
+   * @return {number} scale
+   */
+  getScale() {
+    return this.getMatrix()[0];
+  },
   /**
    * @param {object} matrix - matrix
    */

src/tree.js

@@ -137,7 +137,7 @@ class Tree extends Graph {
    * @param {object} node item node
    * @param {object} nth nth
    */
-  setNodeNth(node, nth) {
+  _setNodeNth(node, nth) {
     node = this.getItem(node);
     const model = node.getModel();
     const parent = node.getParent();
@@ -193,7 +193,7 @@ class Tree extends Graph {
       this._setVisibleByCollapsed(item);
       // set node nth
       if (!Util.isNil(model.nth)) {
-        this.setNodeNth(item, model.nth);
+        this._setNodeNth(item, model.nth);
       }
       this.find(parent.id).forceUpdate();
     } else {
@@ -308,7 +308,7 @@ class Tree extends Graph {
 
       // set node nth
       if (!Util.isNil(model.nth)) {
-        this.setNodeNth(item, model.nth);
+        this._setNodeNth(item, model.nth);
       }
       const parentItem = this.find(itemModel.parent);
       parentItem && parentItem.forceUpdate();

src/version.js

@@ -1 +1 @@
-module.exports = '2.1.0-beta.8';
+module.exports = '2.1.0-beta.9';

test/unit/base-spec.js

@@ -0,0 +1,9 @@
+const Base = require('../../src/base');
+const expect = require('chai').expect;
+
+describe('base test', () => {
+  const base = new Base();
+  it('getDefaultCfg', () => {
+    expect(base.getDefaultCfg()).not.eql(undefined);
+  });
+});

test/unit/graph-spec.js

@@ -370,3 +370,14 @@ describe('graph test', () => {
     expect(div.childNodes.length).equal(0);
   });
 });
+
+// describe('graph test cfg', () => {
+//   it('container is id', () => {
+//     const graph = new Graph({
+//       id: 'graph',
+//       width: 500,
+//       height: 500
+//     });
+//     console.log(div);
+//   });
+// });

test/unit/layouts/base-spec.js

@@ -0,0 +1,12 @@
+const Base = require('../../../src/layouts/base');
+const expect = require('chai').expect;
+
+describe('layout base test', () => {
+  const base = new Base();
+  it('execute', () => {
+    function fn() {
+      base.execute();
+    }
+    expect(fn).to.Throw();
+  });
+});

test/unit/tree-spec.js

@@ -98,6 +98,9 @@ describe('tree test', () => {
     });
     expect(tree.find('addNode.2')).not.equal(undefined);
     expect(tree.find('addNode.1')).equal(undefined);
+    tree.update('addNode', {
+      nth: 1
+    });
   });
   it('remove', () => {
     tree.remove('analytics');
@@ -108,23 +111,23 @@ describe('tree test', () => {
   });
   it('getHierarchy', () => {
     expect(tree.getHierarchy('root')).equal(1);
+    expect(tree.getHierarchy('addNode')).equal(2);
   });
   it('getNth', () => {
-    expect(tree.getNth('addNode')).equal(1);
+    expect(tree.getNth('addNode')).equal(0);
-  });
-  it('setNodeNth', () => {
-    tree.setNodeNth('animate', 1);
-    // expect(tree.getNth('addNode')).equal(1);
   });
   it('save', () => {
     expect(tree.save().roots.length).equal(1);
   });
+  it('getRoots', () => {
+    expect(tree.getRoots()[0].id).equal('root');
+  });
   it('changeLayout', () => {
     tree.changeLayout(() => {
 
     });
   });
-  // it('destroy test graph', () => {
+  it('destroy test graph', () => {
-  //   tree.destroy();
+    tree.destroy();
-  // });
+  });
 });