feat: jiuselu label show/hide with zooming

demos/gallery-graphanalyzer.html

@@ -14,6 +14,7 @@
   <script src="../build/plugin.tool.highlightSubgraph.js"></script>
   <script src="../build/plugin.edge.quadraticCurve.js"></script>
   <script src="../build/plugin.tool.minimap.js"></script>
+  <script src="../build/plugin.tool.textDisplay.js"></script>
   <script src="./assets/jquery-3.2.1.min.js"></script>
   <style>
     ul, li {
@@ -90,16 +91,17 @@
         height: 120
       });
       const highlighter = new Highlighter();
+      const textDisplay = new G6.Plugins['tool.textDisplay']();
 
       graph = new G6.Graph({
         id: 'mountNode', // dom id
         fitView: 'cc',
         plugins: [new Plugin({max_iteration: 600, kg: 10, prev_overlapping: true}), 
         nodeSizeMapper, nodeColorMapper,  edgeSizeMapper,minimapPlugin,
-        new FisheyePlugin({radius: 200}), highlighter],
+        new FisheyePlugin({radius: 200}), highlighter, textDisplay],
         minZoom: 0,
         modes: {
-          default: ['panCanvas']
+          default: ['panCanvas', 'wheelZoom' ]
         },
         height: 1000,
       });

plugins/behaviour.analysis/index.js

@@ -3,6 +3,7 @@
  * @author huangtonger@aliyun.com
  */
 const G6 = require('@antv/g6');
+const Util = G6.Util;
 
 function panCanvas(graph, button = 'left') {
   let lastPoint;
@@ -69,7 +70,9 @@ G6.registerBehaviour('panNode', graph => {
   let dx;
   let dy;
   graph.on('node:dragstart', ev => {
-    const { item } = ev;
+    const {
+      item
+    } = ev;
     const model = item.getModel();
     node = item;
     dx = model.x - ev.x;
@@ -91,3 +94,40 @@ G6.registerBehaviour('panNode', graph => {
     graph.forcePreventAnimate(false);
   });
 });
+
+// wheel zoom
+G6.registerBehaviour('wheelZoom', graph => {
+  let timeout;
+  graph.behaviourOn('mousewheel', ev => {
+    const { domEvent } = ev;
+    domEvent.preventDefault();
+  });
+  graph.behaviourOn('mousewheel', Util.throttle(update, 16));
+
+  function update(ev) {
+    const {
+      domEvent
+    } = ev;
+    const delta = domEvent.wheelDelta;
+    const times = 1.05;
+    if (Math.abs(delta) > 10) { // 控制灵敏度
+      const originScale = graph.getMatrix()[0];
+      if (delta > 0) {
+        graph.zoom({
+          x: ev.x,
+          y: ev.y
+        }, originScale * times);
+      } else {
+        graph.zoom({
+          x: ev.x,
+          y: ev.y
+        }, originScale * (1 / times));
+      }
+    }
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      timeout = undefined;
+    }, 50);
+    graph.emit('afterzoom');
+  }
+});

plugins/index.js

@@ -11,5 +11,6 @@ module.exports = {
   'tool.minimap': require('./tool.minimap/'),
   'tool.tooltip': require('./tool.tooltip/'),
   'tool.fisheye': require('./tool.fisheye/'),
+  'tool.textDisplay': require('./tool.textDisplay/'),
   'util.randomData': require('./util.randomData/')
 };

plugins/tool.textDisplay/index.js

@@ -0,0 +1,41 @@
+/**
+ * @fileOverview fisheye zoom
+ * @author shiwu.wyy@antfin.com
+ */
+
+const G6 = require('@antv/g6');
+const Util = G6.Util;
+
+class Plugin {
+  constructor(options) {
+    Util.mix(this, options);
+  }
+  init() {
+    this.graph.on('afterzoom', () => {
+      this.textDisplay();
+    });
+  }
+  textDisplay() {
+    const graph = this.graph;
+    const nodes = graph.getNodes();
+    const scale = graph.getMatrix()[0];
+    Util.each(nodes, node => {
+      const model = node.getModel();
+      const label = node.getLabel();
+      const labelBox = label.getBBox();
+      const label_width = labelBox.maxX - labelBox.minX;
+      const node_width = model.size * scale;
+      if (label_width === 0) return;
+      const ratio = label_width / node_width;
+      if (ratio > 2) {
+        label.hide();
+      } else {
+        label.show();
+      }
+      graph.draw();
+    });
+  }
+}
+
+G6.Plugins['tool.textDisplay'] = Plugin;
+module.exports = Plugin;

src/extend/g/canvas-root-group.js

@@ -17,8 +17,9 @@ Util.augment(Group, {
   drawInner(context) {
     this.deepEach(child => {
       const freezePoint = child.get('freezePoint');
+      const freezable = this.get('freezable');
       const scale = this.getMatrix()[0];
-      if (child.isShape && freezePoint && child.get('visible')) {
+      if (freezable !== false && child.isShape && freezePoint && child.get('visible')) {
         child.initTransform();
         child.transform([
           [ 't', -freezePoint.x, -freezePoint.y ],

src/shape/nodes/common.js

@@ -66,6 +66,10 @@ Shape.registerNode('common', {
     }
     return group.addShape('text', {
       class: 'label',
+      freezePoint: {
+        x: 0,
+        y: 0
+      },
       attrs
     });
   },

src/util/graph.js

@@ -73,8 +73,9 @@ module.exports = {
     const matrixCache = BaseUtil.cloneDeep(graph.getMatrix());
     const maxZoom = graph.get('maxZoom');
     const minZoom = graph.get('minZoom');
+    const rootGroup = graph.getRootGroup();
     const events = graph._events;
-
+    rootGroup.setSilent('freezable', false);
     graph.set('maxZoom', minMaxZoom);
     graph.set('minZoom', minMinZoom);
     graph.set('width', width);
@@ -90,6 +91,7 @@ module.exports = {
     graphCanvas.set('context', miniMapCanvasContext);
     graphCanvas.beforeDraw();
     graphCanvas.constructor.superclass.draw.call(graphCanvas, miniMapCanvasContext);
+    rootGroup.setSilent('freezable', true);
     graph.set('width', graphWidth);
     graph.set('height', graphHeight);
     graph.set('maxZoom', maxZoom);