wetrade-design/es/stgy-graph/utils/graphNode.js

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

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
/**
 * User: CHT
 * Date: 2020/5/8
 * Time: 14:01
 */
import { APPEND_EMPTY_X_GAP, CONDITION_HEAD_NODE_HEIGHT, SHRINK_CLOSE_X_GAP } from './const';
import { uuid, mark } from './index';
import * as d3 from 'd3';
import { NodeLineType } from './types';
var GraphNode = /*#__PURE__*/function () {
  // 计算X方法

  // 计算Y方法

  // 计算X的依赖集合

  // 宽度
  // 高度

  // Y轴层级

  function GraphNode(props, graph) {
    _classCallCheck(this, GraphNode);
    var _props$coordinate = props.coordinate,
      coordinate = _props$coordinate === void 0 ? [0, 0] : _props$coordinate,
      _props$meta = props.meta,
      meta = _props$meta === void 0 ? null : _props$meta,
      width = props.width,
      height = props.height;
    this.$options = props;
    var id = props[mark.relationMark] || uuid('node');
    this.key = uuid('node');
    this.graph = graph;
    this[mark.relationMark] = id;
    this.coordinate = _toConsumableArray(coordinate);
    this.meta = meta;
    this.width = width;
    this.height = height;
  }
  _createClass(GraphNode, [{
    key: "createPath",
    value: function createPath(_ref) {
      var type = _ref.type;
      var path = d3.path();
      // 是否有下一个节点,并且下一个节点不是空节点
      var startX = this.coordinate[0] + this.width; // 开始x
      var startY = this.coordinate[1] + CONDITION_HEAD_NODE_HEIGHT / 2; // 开始y
      var endX = 0;
      switch (type) {
        case NodeLineType.INSERT:
          endX = startX + APPEND_EMPTY_X_GAP;
          break;
        case NodeLineType.SHRINK:
          endX = startX + SHRINK_CLOSE_X_GAP;
          break;
      }
      var endY = startY;
      path.moveTo(startX, startY);
      path.lineTo(endX, endY);
      path.closePath();
      return path;
    }
  }, {
    key: "createArc",
    value: function createArc(type) {
      var startPath = d3.path();
      var endPath = d3.path();
      var startX = this.coordinate[0] + this.width + 3; // 开始节点x位置
      var startY = this.coordinate[1] + CONDITION_HEAD_NODE_HEIGHT / 2; // 开始节点y位置
      var endX = 0; // 结束位置x
      switch (type) {
        case NodeLineType.INSERT:
          endX = startX + APPEND_EMPTY_X_GAP - 6.5;
          break;
        case NodeLineType.SHRINK:
          endX = startX + SHRINK_CLOSE_X_GAP - 6.5;
          break;
      }
      var endY = startY; // 结束位置 y
      startPath.arc(startX, startY, 3, 0, Math.PI * 2, true);
      endPath.arc(endX, endY, 3, 0, Math.PI * 2, true);
      return {
        startPath: startPath,
        endPath: endPath
      };
    }
    // 创建端点
  }, {
    key: "createTerminalPoint",
    value: function createTerminalPoint(_ref2) {
      var _this$meta, _this$meta$extParam, _this$meta2, _this$meta2$extParam;
      var g = _ref2.g,
        color = _ref2.color,
        type = _ref2.type;
      var _this$createArc = this.createArc(type),
        startPath = _this$createArc.startPath,
        endPath = _this$createArc.endPath;
      g.append('path').classed("line-end-point", true).attr('d', endPath).attr('fill', color);
      if ((_this$meta = this.meta) !== null && _this$meta !== void 0 && (_this$meta$extParam = _this$meta.extParam) !== null && _this$meta$extParam !== void 0 && _this$meta$extParam.isMergeNode) return;
      g.append('path').classed("line-start-point", true).attr('data-id', (_this$meta2 = this.meta) === null || _this$meta2 === void 0 ? void 0 : (_this$meta2$extParam = _this$meta2.extParam) === null || _this$meta2$extParam === void 0 ? void 0 : _this$meta2$extParam.activeId).attr('d', startPath).attr('fill', color);
    }
  }, {
    key: "createLine",
    value: function createLine(_ref3) {
      var _this$meta3, _this$meta3$extParam;
      var g = _ref3.g,
        color = _ref3.style.color,
        type = _ref3.type;
      var path = this.createPath({
        type: type
      });
      g.append('path').classed('line-path', true).attr('data-id', (_this$meta3 = this.meta) === null || _this$meta3 === void 0 ? void 0 : (_this$meta3$extParam = _this$meta3.extParam) === null || _this$meta3$extParam === void 0 ? void 0 : _this$meta3$extParam.activeId).attr('d', path).attr('stroke-width', 1).attr('fill', 'none').attr('stroke', color);
      this.createTerminalPoint({
        g: g,
        color: color,
        type: type
      });
    }
  }]);
  return GraphNode;
}();
export { GraphNode as default };