fix: addBehavior with behavior string name, closes: #3020; fix: drag-…

…node shouldEnd does not stop the dragging node behavior, closes: #3173; fix: drag-combo fails to merge combo with enableDelegate, closes: #3137; fix: uncombo does not trigger afterremoveitem event, closes: #3179; fix: error label background position when the edge label has position start, closes: #3129; fix: destroyed graph judgement, closes: #3203; fix: edge click event will not be triggered when the contextmenu is configure with trigger click, closes: #3201; feat: drag-combo with shouldEnd, closes: #3202; chore: information for failing to download image, closes: #2980;

CHANGELOG.md

@@ -1,5 +1,17 @@
 # ChangeLog
 
+#### 4.3.8
+
+- fix: addBehavior with behavior string name, closes: #3020;
+- fix: drag-node shouldEnd does not stop the dragging node behavior, closes: #3173;
+- fix: drag-combo fails to merge combo with enableDelegate, closes: #3137;
+- fix: uncombo does not trigger afterremoveitem event, closes: #3179;
+- fix: error label background position when the edge label has position start, closes: #3129;
+- fix: destroyed graph judgement, closes: #3203;
+- fix: edge click event will not be triggered when the contextmenu is configure with trigger click, closes: #3201;
+- feat: drag-combo with shouldEnd, closes: #3202;
+- chore: information for failing to download image, closes: #2980;
+
 #### 4.3.7
 
 - fix: update edge to be horizontal and the label is on wrong position;

packages/core/package.json

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

packages/core/src/element/edge.ts

@@ -273,26 +273,21 @@ const singleEdge: ShapeOptions = {
       return style;
     }
 
+    let bgOffsetX = offsetX - backgroundWidth / 2;
+    if (labelCfg.position === 'start') {
+      bgOffsetX =  offsetX - padding[2];
+    } else if (labelCfg.position === 'end') {
+      bgOffsetX =  offsetX - backgroundWidth;
+    }
+
     let offsetStyle = getLabelPosition(
       pathShape,
       pointPercent,
-      offsetX - backgroundWidth / 2,
+      bgOffsetX,
       offsetY + backgroundHeight / 2,
       autoRotate,
     );
 
-    const rad = offsetStyle.angle;
-
-    if (rad > (1 / 2) * Math.PI && rad < ((3 * 1) / 2) * Math.PI) {
-      offsetStyle = getLabelPosition(
-        pathShape,
-        pointPercent,
-        offsetX + backgroundWidth / 2,
-        offsetY + backgroundHeight / 2,
-        autoRotate,
-      );
-    }
-
     if (autoRotate) {
       style.x = offsetStyle.x;
       style.y = offsetStyle.y;
@@ -379,18 +374,16 @@ const singleEdge: ShapeOptions = {
     }
 
     if (labelStyle.background) {
-      const rect = this.drawLabelBg(cfg, group, label);
+      const rect = this.drawLabelBg(cfg, group, label, labelStyle, rotate);
       const labelBgClassname = this.itemType + CLS_LABEL_BG_SUFFIX;
       rect.set('classname', labelBgClassname);
       label.toFront();
     }
     return label;
   },
-  drawLabelBg(cfg: ModelConfig, group: IGroup, label: IElement) {
+  drawLabelBg(cfg: ModelConfig, group: IGroup, label: IElement, labelStyle: any, rotate: number) {
     const { labelCfg: defaultLabelCfg } = this.options as ModelConfig;
     const labelCfg = deepMix({}, defaultLabelCfg, cfg.labelCfg);
-    const labelStyle = this.getLabelStyle!(cfg, labelCfg, group);
-    const rotate = labelStyle.rotate;
 
     const style = this.getLabelBgStyleByPosition(label, cfg, labelCfg, group);
     delete style.rotate;

packages/core/src/global.ts

@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.3.7',
+  version: '0.3.8',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

packages/core/src/graph/controller/item.ts

@@ -174,7 +174,9 @@ export default class ItemController {
       // collapse the combo if the collapsed is true in the model
       if (model.collapsed) {
         setTimeout(() => {
-          graph.collapseCombo(item as ICombo);
+          if (!item.destroyed) {
+            graph.collapseCombo(item as ICombo);
+          }
         }, 0);
       }
     }

packages/core/src/graph/controller/mode.ts

@@ -194,6 +194,7 @@ export default class ModeController {
       );
     }
 
+    this.formatModes();
     this.setMode(this.mode);
 
     return this;

packages/core/src/graph/graph.ts

@@ -1638,6 +1638,7 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
           comboItems.splice(index, 1);
           delete itemMap[comboId];
           comboItem.destroy();
+          this.emit('afterremoveitem', { item: comboItem });
         }
         // find the parent to remove the combo from the combo's brothers array and add the combo's children to the combo's brothers array in the tree
         if (parentId && treeToBeUncombo && subtree.id === parentId) {

packages/core/src/util/graphic.ts

@@ -274,7 +274,7 @@ export const getLabelPosition = (
   };
 
   if (rotate) {
-    if (rad > (1 / 2) * PI && rad < ((3 * 1) / 2) * PI) {
+    if (rad > 0.5 * PI && rad < 1.5 * PI) {
       rad -= PI;
     }
     return {

packages/core/tests/unit/graph/controller/mode-spec.ts

@@ -62,7 +62,7 @@ describe('Mode Controller', () => {
 
     modeController.manipulateBehaviors('drag', 'dragx', true);
     expect(modeController.modes.dragx.length).toBe(1);
-    expect(modeController.modes.dragx[0]).toEqual('drag');
+    expect(modeController.modes.dragx[0].type).toEqual('drag');
 
     modeController.manipulateBehaviors(['drag', 'zoom'], ['out', 'xxx'], true);
     expect(Object.keys(modeController.modes).length).toBe(5);

packages/core/tests/unit/graph/controller/state-spec.ts

@@ -60,7 +60,7 @@ describe('graph state controller', () => {
 
     const modes = graph.get('modes');
     expect(Object.keys(modes)).toEqual(['default']);
-    expect(modes.default).toEqual(['activate-relations']);
+    expect(modes.default[0].type).toEqual('activate-relations');
 
     graph.removeBehaviors('activate-relations', 'default');
 

packages/element/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@antv/g-base": "^0.5.1",
-    "@antv/g6-core": "0.3.7",
+    "@antv/g6-core": "4.3.8",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {
@@ -87,6 +87,6 @@
     "ts-jest": "^24.1.0",
     "ts-loader": "^7.0.3",
     "typescript": "^3.9.5",
-    "@antv/g6": "4.3.7"
+    "@antv/g6": "4.3.8"
   }
 }

packages/g6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.3.7",
+  "version": "4.3.8",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.3.7"
+    "@antv/g6-pc": "4.3.8"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

packages/g6/src/index.ts

@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.3.7';
+G6.version = '4.3.8';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.3.7';
+export const version = '4.3.8';

packages/pc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -74,9 +74,9 @@
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-math": "^0.1.1",
     "@antv/g-svg": "^0.5.1",
-    "@antv/g6-core": "0.3.7",
-    "@antv/g6-plugin": "0.3.7",
-    "@antv/g6-element": "0.3.7",
+    "@antv/g6-core": "0.3.8",
+    "@antv/g6-plugin": "0.3.8",
+    "@antv/g6-element": "0.3.8",
     "@antv/algorithm": "^0.1.8",
     "@antv/hierarchy": "^0.6.7",
     "@antv/layout": "^0.1.14",

packages/pc/src/behavior/drag-combo.ts

@@ -77,6 +77,8 @@ export default {
     const graph: IGraph = this.graph;
     const { item } = evt;
 
+    this.currentShouldEnd = true;
+
     if (!this.validationCombo(evt)) return;
 
     this.targets = [];
@@ -185,22 +187,21 @@ export default {
     }
   },
 
-  updatePositions(evt: IG6GraphEvent) {
+  updatePositions(evt: IG6GraphEvent, restore: boolean) {
     // 当启用 delegate 时，拖动结束时需要更新 combo
-    if (this.enableDelegate) {
+    if (this.enableDelegate || restore) {
       each(this.targets, (item) => {
-        this.updateCombo(item, evt);
+        this.updateCombo(item, evt, restore);
       });
     }
   },
 
   onDrop(evt: IG6GraphEvent) {
     // 被放下的目标 combo
     const { item } = evt;
-    if (!item || !this.targets || item.destroyed) {
-      return;
-    }
-    this.updatePositions(evt);
+    this.currentShouldEnd = this.shouldEnd.call(this, evt, item);
+    this.updatePositions(evt, !this.currentShouldEnd);
+    if (!this.currentShouldEnd || !item || !this.targets || item.destroyed) return;
 
     const graph: IGraph = this.graph;
 
@@ -230,11 +231,16 @@ export default {
   },
   onNodeDrop(evt: IG6GraphEvent) {
     if (!this.targets || this.targets.length === 0) return;
-    this.updatePositions(evt);
     const graph: IGraph = this.graph;
 
     const item = evt.item as INode;
     const comboId = item.getModel().comboId as string;
+
+    const newParentCombo = comboId ? graph.findById(comboId) : undefined;
+    this.currentShouldEnd = this.shouldEnd.call(this, evt, newParentCombo);
+    this.updatePositions(evt, !this.currentShouldEnd);
+    if (!this.currentShouldEnd) return;
+
     let droppedCombo;
     // 如果被放置的的节点有 comboId，且这个 comboId 与正在被拖拽的 combo 的父 id 不相同，则更新父亲为 comboId
     if (comboId) {
@@ -299,7 +305,9 @@ export default {
   onDragEnd(evt: IG6GraphEvent) {
     if (!this.targets || this.targets.length === 0) return;
     const item = evt.item;
-    this.updatePositions(evt);
+    if (this.currentShouldEnd) {
+      this.updatePositions(evt);
+    }
     const parentCombo = this.getParentCombo(item.getModel().parentId);
     const graph: IGraph = this.graph;
     if (parentCombo && this.activeState) {
@@ -363,12 +371,12 @@ export default {
     }
   },
 
-  updateCombo(item: ICombo, evt: IG6GraphEvent) {
+  updateCombo(item: ICombo, evt: IG6GraphEvent, restore: boolean) {
     this.traverse(item, (param) => {
       if (param.destroyed) {
         return false;
       }
-      this.updateSignleItem(param, evt);
+      this.updateSignleItem(param, evt, restore);
       return true;
     });
   },
@@ -378,7 +386,7 @@ export default {
    * @param item 当前正在拖动的元素
    * @param evt
    */
-  updateSignleItem(item: Item, evt: IG6GraphEvent) {
+  updateSignleItem(item: Item, evt: IG6GraphEvent, restore: boolean) {
     const { origin } = this;
     const graph: IGraph = this.graph;
     const model = item.getModel() as ComboConfig;
@@ -391,8 +399,13 @@ export default {
       };
     }
 
-    const x: number = evt.x - origin.x + this.point[itemId].x;
-    const y: number = evt.y - origin.y + this.point[itemId].y;
+    let x: number = evt.x - origin.x + this.point[itemId].x;
+    let y: number = evt.y - origin.y + this.point[itemId].y;
+
+    if (restore) {
+      x += origin.x - evt.x;
+      y += origin.y - evt.y;
+    }
 
     graph.updateItem(item, { x, y });
   },
@@ -444,6 +457,7 @@ export default {
         },
         name: 'combo-delegate-shape',
       });
+      this.delegateShape.set('capture', false);
       this.delegate = this.delegateShape;
     } else {
       const clientX = evt.x - this.origin.x + this.originPoint.minX;