wetrade-design
Version:
一款多语言支持Vue3的UI框架
273 lines (271 loc) • 11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _types = require("./types");
/**
* User: CHT
* Date: 2020/5/8
* Time: 14:01
*/
function calcMatrix(point1, point2, isMerge) {
var pathVerticalVec = [0, point2[1] - point1[1]];
var pointVector = isMerge ? GraphLink.distance_point_merge_vector : GraphLink.distance_point_vector;
// distance 点
var distancePoint = (0, _index.vector)(point2).minus(pointVector).end;
// 拐弯点
var inflectionPoint = (0, _index.vector)(distancePoint).minus(pathVerticalVec).end;
return [point1, inflectionPoint, distancePoint, point2];
}
var GraphLink = /*#__PURE__*/function () {
function GraphLink(options, graph) {
(0, _classCallCheck2.default)(this, GraphLink);
var start = options.start,
_options$end = options.end,
end = _options$end === void 0 ? null : _options$end,
_options$startAt = options.startAt,
startAt = _options$startAt === void 0 ? [0, 0] : _options$startAt,
_options$endAt = options.endAt,
endAt = _options$endAt === void 0 ? [0, 0] : _options$endAt,
_options$meta = options.meta,
meta = _options$meta === void 0 ? null : _options$meta;
this.$options = options;
var id = options[_index.mark.relationMark] || (0, _index.uuid)('link');
this.key = (0, _index.uuid)('link');
this[_index.mark.relationMark] = id;
this.graph = graph;
this.start = start;
this.meta = meta;
this.end = end;
this.startDirection = _types.DIRECTION_VECTOR[_types.Direction.TOP];
this.endDirection = _types.DIRECTION_VECTOR[_types.Direction.TOP];
this.startAt = startAt;
this.endAt = endAt;
}
(0, _createClass2.default)(GraphLink, [{
key: "end",
get: function get() {
return this._end;
},
set: function set(node) {
if (this.start !== node) {
this._end = node;
}
}
}, {
key: "startAt",
get: function get() {
return this._startAt;
},
set: function set(offset) {
var relative = this.start.relative(offset);
this._startAt = relative.position;
this.startDirection = relative.direction;
}
}, {
key: "endAt",
get: function get() {
return this._endAt;
},
set: function set(offset) {
if (this.end) {
var relative = this.end.relative(offset);
this._endAt = relative.position;
this.endDirection = relative.direction;
} else {
this._endAt = offset;
}
}
}, {
key: "movePosition",
get: function get() {
return this._movePosition;
},
set: function set(offset) {
this._movePosition = offset;
if (this.end) return;
var relative = this.start.relative((0, _index.vector)(offset).minus(this.graph.origin).minus(this.start.coordinate).end);
this.endDirection = (0, _index.vector)(relative.direction).multiply(-1).end;
}
}, {
key: "pathPointList",
get: function get() {
var pointList = this.coordinateList(),
xList = [],
yList = [];
pointList.forEach(function (item) {
xList.push(item[0]);
yList.push(item[1]);
});
return {
pointList: pointList,
xList: xList,
yList: yList,
minX: Math.min.apply(Math, xList),
maxX: Math.max.apply(Math, xList),
minY: Math.min.apply(Math, yList),
maxY: Math.max.apply(Math, yList)
};
}
}, {
key: "startCoordinate",
value: function startCoordinate() {
return (0, _index.vector)(this.start.position).add(this.startAt).end;
}
}, {
key: "endCoordinate",
value: function endCoordinate() {
if (this.end) {
return (0, _index.vector)(this.end.position).add(this.endAt).end;
} else {
return this.movePosition;
}
}
}, {
key: "coordinateList",
value: function coordinateList() {
var _this$meta$stationPoi, _this$meta, _this$meta$stationPoi2;
// const entryPoint = this.startCoordinate();
// const exitPoint = this.endCoordinate();
// const entryDirection = this.startDirection;
// let exitDirection = this.endDirection;
// const startPoint = vector(entryDirection).multiply(GraphLink.distance).add(entryPoint).end;
// // 路径终点
// const endPoint = vector(exitDirection).multiply(GraphLink.distance).add(exitPoint).end;
// // 入口方向取反
// exitDirection = vector(exitDirection).multiply(-1).end;
// // 终点 - 起点 水平向量
// const pathHorizontalVec = [endPoint[0] - startPoint[0], 0];
// // 终点 - 起点 垂直向量
// const pathVerticalVec = [0, endPoint[1] - startPoint[1]];
// const startDirection = this.pathDirection(pathVerticalVec, pathHorizontalVec, entryDirection);
// const endDirection = this.pathDirection(pathVerticalVec, pathHorizontalVec, exitDirection);
// const splitNum = vector(startDirection).dotProduct(endDirection).end > 0 ? 2 : 1;
// const pathMiddle = endDirection === pathHorizontalVec ? pathVerticalVec : pathHorizontalVec;
// const points = [];
// points.push(entryPoint, startPoint);
// if (splitNum === 1) {
// const point1 = vector(startPoint).add(startDirection).end;
// const point2 = vector(point1).add(endDirection).end;
// points.push(point1, point2);
// } else {
// const point1 = vector(startDirection).multiply(turnRatio).add(startPoint).end;
// const point2 = vector(point1).add(pathMiddle).end;
// const point3 = vector(endDirection)
// .multiply(1 - turnRatio)
// .add(point2).end;
// points.push(point1, point2, point3);
// }
// points.push(exitPoint);
/**
* 只需要4个点
* 起点、终点
* 同一水平线距离终点前distance的距离的点
* 与起点同一水平线且与第三个点垂直线相同的点
*/
var points = [];
// 起点
var entryPoint = this.startCoordinate();
// 终点
var exitPoint = this.endCoordinate();
var stationPoint = (_this$meta$stationPoi = (_this$meta = this.meta) === null || _this$meta === void 0 ? void 0 : (_this$meta$stationPoi2 = _this$meta.stationPoint) === null || _this$meta$stationPoi2 === void 0 ? void 0 : _this$meta$stationPoi2.map(function (item) {
return [exitPoint[0] - item[0], exitPoint[1] - item[1]];
})) !== null && _this$meta$stationPoi !== void 0 ? _this$meta$stationPoi : [];
var list = [entryPoint].concat((0, _toConsumableArray2.default)(stationPoint), [exitPoint]);
// 给定两个点坐标，得出4个点
for (var i = 1; i < list.length; i++) {
var _this$meta2;
var point1 = list[i - 1];
var point2 = list[i];
var isLast = i === list.length - 1;
var isMerge = isLast && ((_this$meta2 = this.meta) === null || _this$meta2 === void 0 ? void 0 : _this$meta2.activeId) !== -1;
points.push.apply(points, (0, _toConsumableArray2.default)(calcMatrix(point1, point2, isMerge)));
}
// // // 水平向量
// // const pathHorizontalVec = [exitPoint[0] - entryPoint[0], 0];
// // 终点 - 起点 垂直向量
// const pathVerticalVec = [0, exitPoint[1] - entryPoint[1]];
// const pointVector =
// this.meta?.activeId === -1
// ? GraphLink.distance_point_vector
// : GraphLink.distance_point_merge_vector;
// // distance 点
// const distancePoint = vector(exitPoint).minus(pointVector).end;
// // 拐弯点
// const inflectionPoint = vector(distancePoint).minus(pathVerticalVec).end;
// points.push(entryPoint, inflectionPoint, distancePoint, exitPoint);
return points;
}
}, {
key: "pathDirection",
value: function pathDirection(vertical, horizontal, Direction) {
if ((0, _index.vector)(horizontal).parallel(Direction).end) {
if ((0, _index.vector)(horizontal).dotProduct(Direction).end > 0) {
return horizontal;
} else {
return vertical;
}
} else {
if ((0, _index.vector)(vertical).dotProduct(Direction).end > 0) {
return vertical;
} else {
return horizontal;
}
}
}
// 鼠标是否移入线段
}, {
key: "isPointInLink",
value: function isPointInLink(position, pathPointList) {
var _ref = pathPointList || this.pathPointList,
pointList = _ref.pointList,
minX = _ref.minX,
minY = _ref.minY,
maxX = _ref.maxX,
maxY = _ref.maxY;
var n = 5;
if (position[0] < minX - n || position[0] > maxX + n || position[1] < minY - n || position[1] > maxY + n) {
return false;
}
for (var i = 0; i < pointList.length - 2; i++) {
var prev = pointList[i];
var current = pointList[i + 1];
var top = Math.min(prev[1], current[1]) - n;
var right = Math.max(prev[0], current[0]) + n;
var bottom = Math.max(prev[1], current[1]) + n;
var left = Math.min(prev[0], current[0]) - n;
var _position = (0, _slicedToArray2.default)(position, 2),
x = _position[0],
y = _position[1];
if (x > left && x < right && y > top && y < bottom) {
return true;
}
}
return false;
}
}, {
key: "remove",
value: function remove() {
return this.graph.removeLink(this);
}
}, {
key: "toJSON",
value: function toJSON() {
var _ref2;
return _ref2 = {}, (0, _defineProperty2.default)(_ref2, _index.mark.relationMark, this[_index.mark.relationMark]), (0, _defineProperty2.default)(_ref2, _index.mark.startMark, this.start[_index.mark.relationMark]), (0, _defineProperty2.default)(_ref2, _index.mark.endMark, this.end[_index.mark.relationMark]), (0, _defineProperty2.default)(_ref2, "startAt", this.startAt), (0, _defineProperty2.default)(_ref2, "endAt", this.endAt), (0, _defineProperty2.default)(_ref2, "meta", this.meta), _ref2;
}
}]);
return GraphLink;
}();
exports.default = GraphLink;
(0, _defineProperty2.default)(GraphLink, "distance", 80);
(0, _defineProperty2.default)(GraphLink, "distance_point_vector", [52, 0]);
(0, _defineProperty2.default)(GraphLink, "distance_point_merge_vector", [0, 0]);