fix(drag-node): fix delegateShape when item does not have size & edge label rotate problem

src/behavior/drag-node.js

@@ -79,6 +79,10 @@ module.exports = {
     const self = this;
     let shape = item.get('delegateShape');
     let size = item.get('model').size;
+    if (!size) {
+      const bbox = item.get('keyShape').getBBox();
+      size = [ bbox.width, bbox.height ];
+    }
     if (!isArray(size)) {
       size = [ size, size ];
     }

src/shape/single-shape-mixin.js

@@ -106,6 +106,12 @@ const SingleShape = {
       } else {
         const labelCfg = cfg.labelCfg || {};
         const labelStyle = this.getLabelStyle(cfg, labelCfg, group);
+        /**
+         * fixme g中shape的rotate是角度累加的，不是label的rotate想要的角度
+         * 由于现在label只有rotate操作，所以在更新label的时候如果style中有rotate就重置一下变换
+         * 后续会基于g的Text复写一个Label出来处理这一类问题
+         */
+        label.resetMatrix();
         label.attr(labelStyle);
       }
     }

test/unit/behavior/drag-node-spec.js

@@ -70,6 +70,61 @@ describe('drag-node', () => {
     expect(path[1][1]).to.equal(289);
     expect(path[1][2]).to.equal(289);
     expect(!!src.get('delegateShape')).to.be.false;
+    graph.destroy();
+  });
+  it('drag node without size', () => {
+    const graph = new G6.Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      renderer: 'svg',
+      modes: {
+        default: [{ type: 'drag-node' }]
+      },
+      pixelRatio: 2
+    });
+    const node = graph.addItem('node', { id: 'source', color: '#666', x: 50, y: 50, style: { lineWidth: 2, fill: '#666' } });
+    graph.emit('node:dragstart', { clientX: 100, clientY: 100, target: node });
+    graph.emit('node:drag', { clientX: 120, clientY: 120, target: node });
+    const delegateShape = node.get('delegateShape');
+    const bbox = delegateShape.getBBox();
+    expect(bbox.width).to.equal(43);
+    expect(bbox.height).to.equal(43);
+  });
+  it('drag node & edge & label', () => {
+    const graph = new G6.Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      renderer: 'svg',
+      modes: {
+        default: [{
+          type: 'drag-node',
+          delegateStyle: {
+            fillOpacity: 0.8
+          }
+        }]
+      },
+      pixelRatio: 2
+    });
+    const src = graph.addItem('node', { id: 'source', color: '#666', x: 50, y: 50, style: { lineWidth: 2, fill: '#666' } });
+    const target = graph.addItem('node', { id: 'target', color: '#666', x: 300, y: 300, shape: 'rect', style: { lineWidth: 2, fill: '#666' } });
+    const edge = graph.addItem('edge', { source: src, target, label: 'test label', labelCfg: { autoRotate: true } });
+    const label = edge.get('group').findByClassName('edge-label');
+    expect(label).not.to.be.undefined;
+    let matrix = label.getMatrix();
+    expect(matrix[0]).to.equal(0.7071067811865476);
+    expect(matrix[1]).to.equal(0.7071067811865475);
+    expect(matrix[3]).to.equal(-0.7071067811865475);
+    expect(matrix[4]).to.equal(0.7071067811865476);
+    graph.emit('node:dragstart', { clientX: 100, clientY: 100, target });
+    graph.emit('node:drag', { clientX: 120, clientY: 120, target });
+    graph.emit('node:dragend', { clientX: 80, clientY: 120, target });
+    matrix = label.getMatrix();
+    expect(matrix[0]).to.equal(0.6484664555997872);
+    expect(matrix[1]).to.equal(0.7612432304867146);
+    expect(matrix[3]).to.equal(-0.7612432304867146);
+    expect(matrix[4]).to.equal(0.6484664555997872);
   });
   it('prevent default', () => {
     const graph = new G6.Graph({