fix: node:click is triggered twice while clicking a node; fix: update combo edge when drag node out of it problem.

CHANGELOG.md

@@ -1,5 +1,9 @@
 # ChangeLog
 
+#### 3.5.12
+- fix: node:click is triggered twice while clicking a node;
+- fix: update combo edge when drag node out of it problem.
+
 #### 3.5.11
 - feat: graph.priorityState api;
 - feat: graph.on support name:event mode.

examples/item/customNode/demo/meta.json

@@ -6,12 +6,18 @@
   "demos": [
     {
       "filename": "card.js",
-      "title": "卡片",
+      "title": {
+        "zh": "卡片",
+        "en": "Card"
+      },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*3cRGRb5nB_UAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "cardNode.js",
-      "title": "卡片2",
+      "title": {
+        "zh": "卡片 2",
+        "en": "Card 2"
+      },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*b-g0RoOpI3sAAAAAAAAAAABkARQnAQ"
     },
     {

examples/item/customNode/demo/svgDom.js

@@ -1,4 +1,5 @@
 import G6 from '@antv/g6';
+import { useEffect } from 'react';
 
 /**
  *  This demo shows how to register a custom node with SVG DOM shape
@@ -55,8 +56,16 @@ const data = {
   ],
 };
 
-const width = document.getElementById('container').scrollWidth;
-const height = document.getElementById('container').scrollHeight || 500;
+const graphContainer = document.getElementById('container');
+const width = graphContainer.scrollWidth;
+const height = (graphContainer.scrollHeight || 500) - 100;
+
+const descriptionDiv = document.createElement('div');
+descriptionDiv.innerHTML =
+  `由于打包问题，本 demo 的 110-113 行被暂时注释。需要您在代码栏中打开 110-113 行的注释以得到自定义 DOM 节点正确的交互。<br /> Due to the packing problem of the site, we have to note the line 110-113 of this demo temporary. Unnote them to see the result of custom DOM node with interactions please.`;
+const container = document.getElementById('container');
+graphContainer.appendChild(descriptionDiv);
+
 const graph = new G6.Graph({
   container: 'container',
   width,
@@ -74,9 +83,10 @@ const graph = new G6.Graph({
 graph.data(data);
 graph.render();
 
-// click listener for dom nodes to response the click by changing stroke color
+// // click listener for dom nodes to response the click by changing stroke color
 const listener = (dom) => {
   const nodeId = dom.id;
+  if (!nodeId) return;
   const node = graph.findById(nodeId);
   let stroke = '';
   if (!node.hasState('selected')) {
@@ -97,17 +107,17 @@ const bindClickListener = () => {
   const domNodes = document.getElementsByClassName('dom-node')
   for (let i = 0; i < domNodes.length; i++) {
     const dom = domNodes[i];
-    dom.addEventListener('click', (e) => {
-      listener(dom);
-    });
+    // open the following lines pls!
+    // dom.addEventListener('click', (e) => {
+    //   listener(dom);
+    // });
   }
 }
 
-
 bindClickListener();
 
 // after update the item, all the DOMs will be re-rendered
 // so the listeners should be rebinded to the new DOMs
 graph.on('afterupdateitem', e => {
   bindClickListener();
-});
+});

package.json

@@ -86,7 +86,7 @@
     "ml-matrix": "^6.5.0"
   },
   "devDependencies": {
-    "@antv/gatsby-theme-antv": "^0.10.66",
+    "@antv/gatsby-theme-antv": "0.10.69",
     "@babel/core": "^7.7.7",
     "@babel/preset-react": "^7.7.4",
     "@storybook/addon-actions": "^5.2.8",

src/graph/controller/event.ts

@@ -157,9 +157,8 @@ export default class EventController {
     evt.item = item;
     graph.emit(eventType, evt);
 
-    graph.emit(`${type}:${eventType}`, evt);
-
-    graph.emit(evt.name, evt);
+    if (evt.name && !evt.name.includes(':')) graph.emit(`${type}:${eventType}`, evt);
+    else graph.emit(evt.name, evt);
 
     if (eventType === 'dragstart') {
       this.dragging = true;

src/graph/controller/item.ts

@@ -471,7 +471,7 @@ export default class ItemController {
 
     // 再设置state，则此时该优先级为最高
     this.setItemState(currentItem as Item, state, true)
-  } 
+  }
 
   /**
    * 清除所有指定的状态

src/item/node.ts

@@ -10,6 +10,7 @@ import {
   getRectIntersectByPoint,
 } from '../util/math';
 import Item from './item';
+import { clone } from '@antv/util';
 
 const CACHE_ANCHOR_POINTS = 'anchorPointsCache';
 const CACHE_BBOX = 'bboxCache';
@@ -110,12 +111,11 @@ export default class Node extends Item implements INode {
     const type: string = keyShape.get('type');
     const itemType: string = this.get('type');
     let bbox, centerX, centerY;
+    bbox = this.getBBox();
     if (itemType === 'combo') {
-      bbox = this.getKeyShape().getCanvasBBox();
       centerX = (bbox.maxX + bbox.minX) / 2;
       centerY = (bbox.maxY + bbox.minY) / 2;
     } else {
-      bbox = this.getBBox();
       centerX = bbox.centerX;
       centerY = bbox.centerY;
     }

stories/Combo/combo.stories.tsx

@@ -16,6 +16,8 @@ import DagreCombo from './component/dagre-combo';
 import Edges2 from './component/edges2';
 import CreateCombo from './component/create-combo';
 import RemoveItem from './component/remove-item';
+import DragNodeOut from './component/drag-node-out';
+import TreeGraphCreateCombo from './component/treegraph-create-combo';
 
 export default { title: 'Combo' };
 
@@ -57,4 +59,8 @@ storiesOf('Combo', module)
     <CreateCombo />
   )).add('remove item ', () => (
     <RemoveItem />
+  )).add('drag node out', () => (
+    <DragNodeOut />
+  )).add('treegraph create combo', () => (
+    <TreeGraphCreateCombo />
   ));

stories/Combo/component/drag-node-out.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect } from 'react';
+import G6 from '../../../src';
+import { IGraph } from '../../../src/interface/graph';
+import { GraphData } from '../../../src/types';
+
+let graph: IGraph = null;
+
+const data: GraphData = {
+    nodes: [
+        {
+            id: 'node1',
+            label: 'node1',
+            x: 250,
+            y: 150,
+            comboId: 'combo'
+        },
+        {
+            id: 'node2',
+            label: 'node2',
+            x: 350,
+            y: 150,
+            comboId: 'combo'
+        },
+    ],
+    combos: [{
+        id: 'combo',
+        label: 'Combo '
+    }, {
+        id: 'combo1',
+        label: 'Combo'
+    }],
+    edges: [{
+        id: 'edge1',
+        source: 'combo',
+        target: 'combo1'
+    }]
+};
+
+
+const DragNodeOut = () => {
+    const container = React.useRef();
+    useEffect(() => {
+        if (!graph) {
+            graph = new G6.Graph({
+                container: container.current as string | HTMLElement,
+                width: 800,
+                height: 600,
+                fitCenter: true,
+                groupByTypes: false,
+                defaultCombo: {
+                    type: 'circle',
+                    style: {
+                        lineWidth: 1,
+                    },
+                    labelCfg: {
+                        refY: 10,
+                        position: 'top',
+                        style: {
+                            fontSize: 18,
+                        }
+                    }
+                },
+                modes: {
+                    default: ['drag-canvas', 'drag-node', 'drag-combo', 'collapse-expand-combo'],
+                },
+                comboStateStyles: {
+                    // the style configurations for the hover state on the combo
+                    hover: {
+                        lineWidth: 3
+                    },
+                },
+                nodeStateStyles: {
+                    // the hover configurations for the hover state on the node
+                    hover: {
+                        lineWidth: 3
+                    },
+                },
+            });
+            graph.data(data);
+            graph.render();
+
+            graph.on('combo:click', e => {
+                console.log('clicking combo')
+            });
+            graph.on('node:click', e => {
+                console.log('clicking node!!!')
+            });
+            graph.on('text-shape:click', e => {
+                console.log('clicking text-shape-----')
+            });
+        }
+    });
+    return <div ref={container}></div>;
+};
+
+export default DragNodeOut;

stories/Combo/component/edges2.tsx

@@ -96,7 +96,7 @@ const Edges2 = () => {
                 height: 800,
                 groupByTypes: false,
                 defaultEdge: {
-                    type: 'polyline',
+                    type: 'line',
                     style: {
                         endArrow: true
                     }

stories/Combo/component/treegraph-create-combo.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect } from 'react';
+import G6 from '../../../src';
+import { ITreeGraph } from '../../../src/interface/graph';
+import { GraphData } from '../../../src/types';
+
+let graph: ITreeGraph = null;
+
+const data = {
+    id: "A",
+    label: "开始",
+    children: [
+        {
+            id: "A1",
+            label: "节点1",
+            children: [
+                { id: "A11", label: "A11" },
+                { id: "A12", label: "A12" },
+                { id: "A13", label: "A13" },
+                { id: "A14", label: "A14" }
+            ]
+        }
+    ]
+};
+
+const TreeGraphCreateCombo = () => {
+    const container = React.useRef();
+    useEffect(() => {
+        if (!graph) {
+            graph = new G6.TreeGraph({
+                container: container.current as string | HTMLElement,
+                width: 500,
+                height: 400,
+                groupByTypes: false,
+                fitView: true,
+                defaultNode: {
+                    type: 'rect',
+                    size: [25, 10],
+                    style: {
+                        fill: 'pink',
+                        lineWidth: 0
+                    },
+                    labelCfg: {
+                        style: {
+                            fontSize: 6,
+                        }
+                    }
+                },
+                layout: {
+                    type: "dendrogram",
+                    direction: "LR",
+                    nodeSep: 30,
+                    rankSep: 60
+                },
+                defaultEdge: {
+                    type: "polyline",
+                    style: {
+                        lineWidth: 1,
+                        offset: 17.5,
+                        endArrow: {
+                            path: G6.Arrow.triangle(3, 5, 1),
+                            d: 1
+                        }
+                    }
+                },
+                modes: {
+                    default: [
+                        'drag-canvas',
+                        {
+                            type: 'collapse-expand',
+                        },
+                        'zoom-canvas',
+                    ],
+                },
+            });
+            graph.data(data);
+            graph.render();
+            graph.createCombo({
+                id: 'combo1',
+                type: 'rect',
+                padding: [5, 5, 5, 5]
+            }, ['A11', 'A12', 'A13'])
+        }
+    });
+    return <div ref={container}></div>;
+};
+
+export default TreeGraphCreateCombo;