feat: graph.priorityState & event mode

CHANGELOG.md

@@ -1,5 +1,9 @@
 # ChangeLog
 
+#### 3.5.11
+- feat: graph.priorityState api;
+- feat: graph.on support name:event mode.
+
 #### 3.5.10
 - fix: fitView and fitCenter with animate in the initial state;
 - fix: dulplicated edges in nodeselectchange event of brush-select;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "3.5.10",
+  "version": "3.5.11",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

src/global.ts

@@ -1,5 +1,5 @@
 export default {
-  version: '3.5.10',
+  version: '3.5.11',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

src/graph/controller/event.ts

@@ -10,32 +10,32 @@ import { IG6GraphEvent, Matrix, Item } from '../../types';
 import { cloneEvent, isViewportChanged } from '../../util/base';
 import { mat3 } from '@antv/matrix-util';
 
-
 type Fun = () => void;
 
-const EVENTS = [
-  'click',
-  'mousedown',
-  'mouseup',
-  'dblclick',
-  'contextmenu',
-  'mouseenter',
-  'mouseout',
-  'mouseover',
-  'mousemove',
-  'mouseleave',
-  'dragstart',
-  'dragend',
-  'drag',
-  'dragenter',
-  'dragleave',
-  'dragover',
-  'dragout',
-  'drop',
-  'touchstart',
-  'touchmove',
-  'touchend',
-];
+// const EVENTS = [
+//   'click',
+//   'mousedown',
+//   'mouseup',
+//   'dblclick',
+//   'contextmenu',
+//   'mouseenter',
+//   'mouseout',
+//   'mouseover',
+//   'mousemove',
+//   'mouseleave',
+//   'dragstart',
+//   'dragend',
+//   'drag',
+//   'dragenter',
+//   'dragleave',
+//   'dragover',
+//   'dragout',
+//   'drop',
+//   'touchstart',
+//   'touchmove',
+//   'touchend',
+// ];
+
 export default class EventController {
   private graph: Graph;
 
@@ -69,9 +69,11 @@ export default class EventController {
     const originHandler = wrapBehavior(this, 'onExtendEvents');
     const wheelHandler = wrapBehavior(this, 'onWheelEvent');
 
-    each(EVENTS, event => {
-      canvas.on(event, canvasHandler);
-    });
+    // each(EVENTS, event => {
+    //   canvas.on(event, canvasHandler);
+    // });
+
+    canvas.on('*', canvasHandler)
 
     this.canvasHandler = canvasHandler;
     extendEvents.push(addEventListener(el, 'DOMMouseScroll', wheelHandler));
@@ -157,6 +159,8 @@ export default class EventController {
 
     graph.emit(`${type}:${eventType}`, evt);
 
+    graph.emit(evt.name, evt);
+
     if (eventType === 'dragstart') {
       this.dragging = true;
     }
@@ -235,9 +239,11 @@ export default class EventController {
     const { graph, canvasHandler, extendEvents } = this;
     const canvas: Canvas = graph.get('canvas');
 
-    each(EVENTS, event => {
-      canvas.off(event, canvasHandler);
-    });
+    // each(EVENTS, event => {
+    //   canvas.off(event, canvasHandler);
+    // });
+
+    canvas.off('*', canvasHandler);
 
     each(extendEvents, event => {
       event.remove();

src/graph/controller/item.ts

@@ -446,6 +446,25 @@ export default class ItemController {
     graph.emit('afteritemstatechange', { item, state: stateName, enabled: value });
   }
 
+  /**
+   * 将指定状态的优先级提升为最高优先级
+   * @param {Item} item 元素id或元素实例
+   * @param state 状态名称
+   */
+  public priorityState(item: Item | string, state: string): void {
+    const { graph } = this;
+
+    let currentItem = item
+    if (isString(item)) {
+      currentItem = graph.findById(item)
+    }
+    // 先取消已有的 state
+    this.setItemState(currentItem as Item, state, false)
+
+    // 再设置state，则此时该优先级为最高
+    this.setItemState(currentItem as Item, state, true)
+  } 
+
   /**
    * 清除所有指定的状态
    *

src/graph/graph.ts

@@ -1150,6 +1150,16 @@ export default class Graph extends EventEmitter implements IGraph {
     }
   }
 
+  /**
+   * 将指定状态的优先级提升为最高优先级
+   * @param {Item} item 元素id或元素实例
+   * @param state 状态名称
+   */
+  public priorityState(item: Item | string, state: string): void {
+    const itemController: ItemController = this.get('itemController')
+    itemController.priorityState(item, state);
+  }
+
   /**
    * 设置视图初始化数据
    * @param {GraphData} data 初始化数据

src/interface/graph.ts

@@ -188,6 +188,13 @@ export interface IGraph extends EventEmitter {
    */
   setItemState(item: Item | string, state: string, value: string | boolean): void;
 
+  /**
+   * 将指定状态的优先级提升为最高优先级
+   * @param {Item} item 元素id或元素实例
+   * @param state 状态名称
+   */
+  priorityState(item: Item | string, state: string): void;
+
   /**
    * 设置视图初始化数据
    * @param {GraphData} data 初始化数据

tests/unit/graph/controller/event-spec.ts

@@ -256,3 +256,92 @@ describe('event', () => {
     expect(graph.destroyed).toBe(true);
   });
 });
+
+describe('event with name', () => {
+  it('default node', () => {
+    G6.registerNode('custom-node', {
+      drawShape(cfg, group) {
+        const keyShape = group.addShape('rect', {
+          attrs: {
+            width: 120,
+            height: 50,
+            stroke: 'red',
+            fill: '#ccc'
+          },
+          name: 'custom-node-rect'
+        })
+
+        group.addShape('rect', {
+          attrs: {
+            width: 70,
+            height: 30,
+            stroke: 'green',
+            fill: 'green',
+            x: 20,
+            y: 10
+          },
+          name: 'custom-node-subrect'
+        })
+        return keyShape
+      }
+    }, 'single-node')
+
+    const graph = new G6.Graph({
+      container: 'event-spec',
+      width: 500,
+      height: 400,
+      nodeStateStyles: {
+        selected: {
+          fill: 'red'
+        }
+      },
+      defaultNode: {
+        type: 'custom-node',
+        linkPoint: {
+          show: true
+        }
+      }
+    })
+
+    const data = {
+      nodes: [
+        {
+          id: 'node',
+          label: 'node',
+          x: 100,
+          y: 200
+        },
+        {
+          id: 'node1',
+          label: 'node1',
+          x: 300,
+          y: 200
+        }
+      ]
+    }
+
+    graph.data(data)
+    graph.render()
+
+    graph.on('node:mouseenter', evt => {
+      graph.setItemState(evt.item, 'selected', true)
+    })
+
+    graph.on('node:mouseleave', evt => {
+      graph.setItemState(evt.item, 'selected', false)
+    })
+
+    graph.on('custom-node-rect:click', evt => {
+      graph.setItemState(evt.item, 'selected', true)
+      const name = evt.target.get('name')
+      expect(name).toEqual('custom-node-rect')
+    })
+
+    graph.on('custom-node-subrect:click', evt => {
+      const name = evt.target.get('name')
+      expect(name).toEqual('custom-node-subrect')
+    })
+
+    graph.destroy()
+  })
+})