wetrade-design/lib/stgy-graph/utils/graphLink.js

一款多语言支持Vue3的UI框架

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _index = require("./index");
var _const = require("./const");
var d3 = _interopRequireWildcard(require("d3"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
 * User: CHT
 * Date: 2020/5/8
 * Time: 14:01
 */
var GraphLink = /*#__PURE__*/function () {
  function GraphLink(options, graph) {
    (0, _classCallCheck2.default)(this, GraphLink);
    var _options$meta = options.meta,
      meta = _options$meta === void 0 ? null : _options$meta,
      startId = options.startId,
      endId = options.endId,
      id = options.id;
    this.$options = options;
    this.key = (0, _index.uuid)('link');
    this.graph = graph;
    this.meta = meta;
    this.startId = startId;
    this.endId = endId;
    this.id = id;
  }
  // 创建路径
  (0, _createClass2.default)(GraphLink, [{
    key: "createPath",
    value: function createPath() {
      var _this$meta, _link$meta;
      var link = this.$options;
      var pointMap = this.graph.nodeMap;
      var startNode = pointMap[link.startId];
      var endNode = pointMap[link.endId];
      var path = d3.path();
      var startX = startNode.coordinate[0] + startNode.width; // 开始节点x位置
      var startY = startNode.coordinate[1] + _const.CONDITION_HEAD_NODE_HEIGHT / 2; // 开始节点y位置
      var outputDistance = ((_this$meta = this.meta) === null || _this$meta === void 0 ? void 0 : _this$meta.activeId) !== -1 ? GraphLink.distance_merge : GraphLink.distance_output; // 出口的间距 出口的间距是固定的
      var distance = endNode.coordinate[0] - startX; // 线左右之间的总距离
      var firstDistance = distance - outputDistance; // 首次拐点的距离
      var cpx1 = startX + firstDistance; // 第一个拐点控制点 x
      var cpy1 = startY; // 第一个拐点控制点 y
      var cpx2 = cpx1; // 第二个拐点控制点 x
      var cpy2 = endNode.coordinate[1] + _const.CONDITION_HEAD_NODE_HEIGHT / 2; // 第二个拐点控制点 y
      if (link !== null && link !== void 0 && (_link$meta = link.meta) !== null && _link$meta !== void 0 && _link$meta.isDragElement) {
        cpy2 = endNode.coordinate[1] + _const.DRAG_NODE_HEIGHT / 2; // 拖拽节点中间高度
      }

      var endX = endNode.coordinate[0]; // 结束位置x
      var endY = cpy2; // 结束位置y
      var startPoint = [startX, startY];
      path.moveTo.apply(path, startPoint); //起始点移动到指定的坐标
      path.lineTo(cpx1, cpy1); // 第一个拐点
      path.moveTo(cpx1, cpy1);
      path.lineTo(cpx2, cpy2); // 第二个拐点
      path.moveTo(cpx2, cpy2);
      path.lineTo(endX, endY); // 结束坐标
      path.closePath();
      return path;
    }
  }, {
    key: "createInsertPath",
    value: function createInsertPath() {}
    // 创建连线
  }, {
    key: "createLink",
    value: function createLink(_ref, eventCallback) {
      var _this$meta2;
      var g = _ref.g,
        color = _ref.style.color;
      var path = this.createPath();
      // 绘制连线点击热区
      g.append('path').classed('link-path-hot', true)
      // .attr('data-id', this.meta?.activeId)
      .attr('d', path).attr('visibility', 'hidden').attr('pointer-events', 'stroke').attr('stroke-width', 11).attr('fill', 'none').attr('stroke', 'white');
      // 绘制实际可见连线
      g.append('path').classed('link-path', true).attr('data-id', (_this$meta2 = this.meta) === null || _this$meta2 === void 0 ? void 0 : _this$meta2.activeId).attr('d', path).attr('pointer-events', 'stroke').attr('stroke-width', 1).attr('fill', 'none').attr('stroke', color);
      var selection = g.select('.link-path');
      selection.merge(g);
      this.createTerminalPoint({
        g: g,
        color: color
      });
      g.on('click', eventCallback);
    }
  }, {
    key: "createArc",
    value: function createArc() {
      var _link$meta2;
      var link = this.$options;
      var startPath = d3.path();
      var endPath = d3.path();
      var pointMap = this.graph.nodeMap;
      var startNode = pointMap[link.startId];
      var endNode = pointMap[link.endId];
      var startX = startNode.coordinate[0] + startNode.width + 3; // 开始节点x位置
      var startY = startNode.coordinate[1] + _const.CONDITION_HEAD_NODE_HEIGHT / 2; // 开始节点y位置
      var endX = endNode.coordinate[0] - 3.5; // 结束位置x
      var endY = endNode.coordinate[1] + _const.CONDITION_HEAD_NODE_HEIGHT / 2; // 结束位置 y
      if (link !== null && link !== void 0 && (_link$meta2 = link.meta) !== null && _link$meta2 !== void 0 && _link$meta2.isDragElement) {
        endY = endNode.coordinate[1] + _const.DRAG_NODE_HEIGHT / 2; // 拖拽节点中间高度
      }

      endPath.arc(endX, endY, 3, 0, Math.PI * 2, true);
      startPath.arc(startX, startY, 3, 0, Math.PI * 2, true);
      return {
        startPath: startPath,
        endPath: endPath
      };
    }
    // 创建端点
  }, {
    key: "createTerminalPoint",
    value: function createTerminalPoint(_ref2) {
      var _this$meta3, _this$meta4;
      var g = _ref2.g,
        color = _ref2.color;
      var _this$createArc = this.createArc(),
        startPath = _this$createArc.startPath,
        endPath = _this$createArc.endPath;
      if (((_this$meta3 = this.meta) === null || _this$meta3 === void 0 ? void 0 : _this$meta3.activeId) === -1) {
        g.append('path').classed('link-end-point', true).attr('d', endPath).attr('fill', color).attr('stroke', 'none');
      }
      if (this.isMergeNodeStart()) return;
      g.append('path').classed('link-start-point', true).attr('data-id', (_this$meta4 = this.meta) === null || _this$meta4 === void 0 ? void 0 : _this$meta4.activeId).attr('d', startPath).attr('fill', color).attr('stroke', 'none');
    }
    // 是否以合并节点为开始节点
  }, {
    key: "isMergeNodeStart",
    value: function isMergeNodeStart() {
      var _node$meta, _node$meta$extParam;
      var startId = this.$options.startId;
      var pointMap = this.graph.nodeMap;
      var node = pointMap[startId];
      return !!(node !== null && node !== void 0 && (_node$meta = node.meta) !== null && _node$meta !== void 0 && (_node$meta$extParam = _node$meta.extParam) !== null && _node$meta$extParam !== void 0 && _node$meta$extParam.isMergeNode);
    }
  }]);
  return GraphLink;
}();
exports.default = GraphLink;
(0, _defineProperty2.default)(GraphLink, "distance", _const.NODE_DISTANCE_X);
(0, _defineProperty2.default)(GraphLink, "distance_output", _const.END_DISTANCE);
(0, _defineProperty2.default)(GraphLink, "distance_merge", 0);
(0, _defineProperty2.default)(GraphLink, "distance_point_merge_vector", [0, 0]);