@antv/g6/lib/shape/edges/common.js

graph visualization frame work

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

/**
 * @fileOverview edge shapes
 * @author huangtonger@aliyun.com
 */

var Shape = require('../shape');
var Util = require('../../util/');
var Global = require('../../global');
var MIN_ARROW_SIZE = 3;
var defaultArrow = {
  path: function path(item) {
    var keyShape = item.getKeyShape();
    var lineWidth = keyShape.attr('lineWidth');
    lineWidth = lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE;
    var halfWidth = lineWidth * 10 / 3;
    var halfHeight = lineWidth * 4 / 3;
    var radius = lineWidth * 4;
    return [['M', -halfWidth, halfHeight], ['L', 0, 0], ['L', -halfWidth, -halfHeight], ['A', radius, radius, 0, 0, 1, -halfWidth, halfHeight], ['Z']];
  },
  dindent: function dindent(item) {
    var keyShape = item.getKeyShape();
    var lineWidth = keyShape.attr('lineWidth');
    return (lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE) * 3.1;
  },
  style: function style(item) {
    var keyShape = item.getKeyShape();

    var _keyShape$get = keyShape.get('attrs'),
        strokeOpacity = _keyShape$get.strokeOpacity,
        stroke = _keyShape$get.stroke;

    return {
      fillOpacity: strokeOpacity,
      fill: stroke
    };
  }
};

Shape.registerEdge('common', {
  draw: function draw(item) {
    var keyShape = this.drawKeyShape(item);
    this.drawLabel(item, keyShape);
    return keyShape;
  },
  drawKeyShape: function drawKeyShape(item) {
    var group = item.getGraphicGroup();
    var style = this.getStyle(item);

    var path = this.getPath(item);
    return group.addShape('path', {
      attrs: Util.mix({}, style, {
        path: path
      })
    });
  },
  getStyle: function getStyle(item) {
    var model = item.getModel();
    return Util.mix(true, {}, {
      stroke: model.color || '#A3B1BF',
      strokeOpacity: 0.92,
      lineAppendWidth: 4,
      lineWidth: model.size || 1
    }, model.style);
  },
  getPath: function getPath(item) {
    var points = item.getPoints();
    return Util.pointsToPolygon(points);
  },
  getLabel: function getLabel(item) {
    var model = item.getModel();
    return model.label;
  },
  drawLabel: function drawLabel(item, keyShape) {
    var label = this.getLabel(item);
    var group = item.getGraphicGroup();
    var model = item.getModel();

    if (label) {
      var center = keyShape.getPoint(0.5);
      var attrs = Util.mix(true, {}, Global.labelStyle, center);

      if (!Util.isObject(label)) {
        attrs.text = label;
      } else {
        Util.mix(attrs, label);
      }
      label = group.addShape('text', {
        attrs: attrs
      });
      var padding = Util.toAllPadding([4, 8]);
      var textBox = label.getBBox();
      var defaultStyle = {
        fill: 'white'
      };
      var style = model.labelRectStyle ? Util.mix({}, defaultStyle, model.labelRectStyle) : defaultStyle;
      group.addShape('rect', {
        attrs: Util.mix({}, style, {
          x: textBox.minX - padding[3],
          y: textBox.minY - padding[0],
          width: textBox.maxX - textBox.minX + padding[1] + padding[3],
          height: textBox.maxY - textBox.minY + padding[0] + padding[2]
        })
      });
      Util.toFront(label);
    }
  },

  startArrow: _extends({}, defaultArrow, {
    tangent: function tangent(item) {
      var keyShape = item.getKeyShape();
      return keyShape.getStartTangent();
    },
    ratio: function ratio() {
      return 0;
    }
  }),
  endArrow: _extends({}, defaultArrow, {
    tangent: function tangent(item) {
      var keyShape = item.getKeyShape();
      return keyShape.getEndTangent();
    },
    ratio: function ratio() {
      return 1;
    }
  })
});