fix: changeData without combos problem

packages/core/src/graph/graph.ts

@@ -1446,6 +1446,8 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
     if (combosData) {
       const comboTrees = plainCombosToTrees(combosData, (data as GraphData).nodes);
       this.set('comboTrees', comboTrees);
+    } else {
+      this.set('comboTrees', []);
     }
 
     this.diffItems('node', items, (data as GraphData).nodes!);
@@ -1471,6 +1473,8 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       }
     }
 
+    console.log('this.getCombos()',itemMap, comboItems, combosData, this.getCombos())
+
     // process the data to tree structure
     if (combosData) {
       // add combos

packages/site/docs/api/Event.en.md

@@ -129,8 +129,8 @@ Combo inherit all the interaction events of Node.
 | canvas:mouseleave | Activated when the mouse leaves the canvas. |
 | canvas:mousedown | Activated when the left or right button is clicked down on the canvas. It cannot be activated by keyboard. |
 | canvas:mouseup | Activated when the left or right button is released on the canvas. It cannot be activated by keyboard. |
-| canvas:contextmenu | Open the context menu when user clicks the right button of mouse on the canvas. |
-| canvas:dragstart | Activated when user begins to drag the canvas. This event is applied on the dragged canvas.  |
+| canvas:contextmenu | Open the context menu when user clicks the right button of mouse on the canvas. [Demo](/en/examples/tool/contextMenu). |
+| canvas:dragstart | Activated when user begins to drag the canvas. This event is applied on the dragged canvas. |
 | canvas:drag | Activated during the dragging process on the canvas. This event is applied on the dragged canvas. |
 | canvas:dragend | Activated when user stops dragging on the canvas. This event is applied on the dragged canvas. |
 | canvas:dragenter | Activated when user drags the canvas into a target item. This event is applied on the target item. |

packages/site/docs/manual/middle/elements/methods/multi-line.en.md

@@ -113,6 +113,12 @@ We found that the code above can not handle this situation any more. The result:
 
 ## Solution
 
+### Solution 1
+
+Refer to the [Demo](/en/examples/item/multiEdge#multiEdges) and use the util function `processParallelEdges`.
+
+### Solution 2
+
 To solve this problem, we utlize the [Custom Edge](/en/docs/manual/middle/elements/edges/custom-edge) of G6.
 
 There are two tips should be taken into consideration before customize an edge:
@@ -125,11 +131,11 @@ Therefore, we add a property `edgeType` for each edge in its data to identify di
 The complete the code for the demo is shown below:
 
 <iframe
-     src="https://codesandbox.io/embed/restless-breeze-fhief?fontsize=14&hidenavigation=1&theme=dark"
-     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-     title="restless-breeze-fhief"
-     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
-     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+    src="https://codesandbox.io/embed/cocky-bash-9hh3u?fontsize=14&hidenavigation=1&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="cocky-bash-9hh3u"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    ></iframe>
 
-Now, the prolem is solved.
+Now, the problem is solved.

packages/site/docs/manual/middle/elements/methods/multi-line.zh.md

@@ -113,6 +113,12 @@ const data = {
 
 ## 解决方案
 
+### 方案 1
+
+参考 [Demo](/zh/examples/item/multiEdge#multiEdges)，使用 util 方法  `processParallelEdges`。
+
+### 方案 2
+
 这个时候，需要借助 G6 的 [自定义边](/zh/docs/manual/middle/elements/edges/custom-edge) 功能。
 
 有了这个黑科技，什么样的需求，那还不是分分钟的事。
@@ -127,11 +133,11 @@ const data = {
 完善的自定义边的代码如下。
 
 <iframe
-     src="https://codesandbox.io/embed/restless-breeze-fhief?fontsize=14&hidenavigation=1&theme=dark"
-     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-     title="restless-breeze-fhief"
-     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
-     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+    src="https://codesandbox.io/embed/cocky-bash-9hh3u?fontsize=14&hidenavigation=1&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="cocky-bash-9hh3u"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    ></iframe>
 
 至此，我们实现了让两个节点之间展示多条边的功能。

packages/site/examples/case/simpleCase/demo/ER.js

@@ -156,6 +156,11 @@ registerBehavior("dice-er-scroll", {
 
       return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox);
     });
+
+    const x = e.deltaX || e.movementX;
+    let y = e.deltaY || e.movementY;
+    if (!y && navigator.userAgent.indexOf('Firefox') > -1) y = (-e.wheelDelta * 125) / 3
+
     if (nodes) {
       nodes.forEach((node) => {
         const model = node.getModel();
@@ -164,8 +169,8 @@ registerBehavior("dice-er-scroll", {
         }
         const idx = model.startIndex || 0;
         let startX = model.startX || 0.5;
-        let startIndex = idx + e.deltaY * 0.02;
-        startX -= e.deltaX;
+        let startIndex = idx + y * 0.02;
+        startX -= x;
         if (startIndex < 0) {
           startIndex = 0;
         }