wetrade-design
Version:
一款多语言支持Vue3的UI框架
146 lines (144 loc) • 6.67 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
/**
* User: CHT
* Date: 2020/5/8
* Time: 14:01
*/
import { uuid } from './index';
import { CONDITION_HEAD_NODE_HEIGHT, DRAG_NODE_HEIGHT, END_DISTANCE, NODE_DISTANCE_X } from './const';
import * as d3 from 'd3';
var GraphLink = /*#__PURE__*/function () {
function GraphLink(options, graph) {
_classCallCheck(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 = uuid('link');
this.graph = graph;
this.meta = meta;
this.startId = startId;
this.endId = endId;
this.id = id;
}
// 创建路径
_createClass(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] + 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] + 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] + 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] + CONDITION_HEAD_NODE_HEIGHT / 2; // 开始节点y位置
var endX = endNode.coordinate[0] - 3.5; // 结束位置x
var endY = endNode.coordinate[1] + 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] + 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;
}();
_defineProperty(GraphLink, "distance", NODE_DISTANCE_X);
_defineProperty(GraphLink, "distance_output", END_DISTANCE);
_defineProperty(GraphLink, "distance_merge", 0);
_defineProperty(GraphLink, "distance_point_merge_vector", [0, 0]);
export { GraphLink as default };