@logicflow/core
Version:
LogicFlow, help you quickly create flowcharts
1,359 lines • 66.7 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { find, forEach, map, merge, isBoolean, debounce, cloneDeep, isNil, } from 'lodash-es';
import { action, computed, observable } from 'mobx';
import { EditConfigModel, } from '.';
import { DEFAULT_VISIBLE_SPACE, ELEMENT_MAX_Z_INDEX, ElementState, ElementType, EventType, ModelType, OverlapMode, TextMode, } from '../constant';
import { createEdgeGenerator, createUuid, formatData, getClosestPointOfPolyline, getMinIndex, getNodeAnchorPosition, getNodeBBox, getZIndex, isPointInArea, setupAnimation, setupTheme, snapToGrid, updateTheme, backgroundModeMap, gridModeMap, } from '../util';
import EventEmitter from '../event/eventEmitter';
import { Grid } from '../view/overlay';
import NestedTransformModel from './NestedTransformModel';
var GraphModel = /** @class */ (function () {
function GraphModel(options) {
var _this = this;
var _a, _b;
// 维护所有节点和边类型对应的 model
this.modelMap = new Map();
// Remind：用于记录当前画布上所有节点和边的 model 的 Map
// 现在的处理方式，用 this.nodes.map 生成的方式，如果在 new Model 的过程中依赖于其它节点的 model，会出现找不到的情况
// eg: new DynamicGroupModel 时，需要获取当前 children 的 model，根据 groupModel 的 isCollapsed 状态更新子节点的 visible
this.nodeModelMap = new Map();
this.edgeModelMap = new Map();
this.elementsModelMap = new Map();
/**
* 节点移动规则判断
* 在节点移动的时候，会触发此数组中的所有规则判断
*/
this.nodeMoveRules = [];
/**
* 节点resize规则判断
* 在节点resize的时候，会触发此数组中的所有规则判断
*/
this.nodeResizeRules = [];
// 当前图上所有节点的model
this.nodes = [];
// 当前图上所有边的model
this.edges = [];
/**
* 元素重合时堆叠模式：
* - DEFAULT（默认模式）：节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级
* - INCREASE（递增模式）：节点和边被选中，会被显示在最上面。当取消选中后，元素会保持当前层级
*/
this.overlapMode = OverlapMode.DEFAULT;
// 网格大小
this.gridSize = 1;
// 控制是否开启局部渲染
this.partial = false;
this.waitCleanEffects = [];
var container = options.container, partial = options.partial, _c = options.background, background = _c === void 0 ? {} : _c, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory;
this.rootEl = container;
this.partial = !!partial;
this.background = background;
if (typeof grid === 'object' && options.snapGrid) {
// 开启网格对齐时才根据网格尺寸设置步长
// TODO：需要让用户设置成 0 吗？后面可以讨论一下
this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
}
this.customStyles = options.style || {};
this.grid = Grid.getGridOptions(grid !== null && grid !== void 0 ? grid : false);
this.theme = setupTheme(options.style, options.themeMode);
this.theme.grid = cloneDeep(this.grid);
this.theme.background = cloneDeep(this.background);
this.edgeType = options.edgeType || 'polyline';
this.animation = setupAnimation(animation);
this.overlapMode = options.overlapMode || OverlapMode.DEFAULT;
this.width = (_a = options.width) !== null && _a !== void 0 ? _a : this.rootEl.getBoundingClientRect().width;
this.isContainerWidth = isNil(options.width);
this.height = (_b = options.height) !== null && _b !== void 0 ? _b : this.rootEl.getBoundingClientRect().height;
this.isContainerHeight = isNil(options.height);
var resizeObserver = new ResizeObserver(debounce((function (entries) {
var e_1, _a;
try {
for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
var entry = entries_1_1.value;
if (entry.target === _this.rootEl) {
_this.resize();
_this.eventCenter.emit('graph:resize', {
target: _this.rootEl,
contentRect: entry.contentRect,
});
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
}
finally { if (e_1) throw e_1.error; }
}
}), 16));
resizeObserver.observe(this.rootEl);
this.waitCleanEffects.push(function () {
resizeObserver.disconnect();
});
this.eventCenter = new EventEmitter();
this.editConfigModel = new EditConfigModel(options);
this.transformModel = new NestedTransformModel(this.eventCenter, options);
this.flowId = createUuid();
this.idGenerator = idGenerator;
this.edgeGenerator = createEdgeGenerator(this, edgeGenerator);
this.customTrajectory = customTrajectory;
}
Object.defineProperty(GraphModel.prototype, "nodesMap", {
get: function () {
return this.nodes.reduce(function (nMap, model, index) {
nMap[model.id] = {
index: index,
model: model,
};
return nMap;
}, {});
},
enumerable: false,
configurable: true
});
Object.defineProperty(GraphModel.prototype, "edgesMap", {
get: function () {
return this.edges.reduce(function (eMap, model, index) {
eMap[model.id] = {
index: index,
model: model,
};
return eMap;
}, {});
},
enumerable: false,
configurable: true
});
Object.defineProperty(GraphModel.prototype, "modelsMap", {
get: function () {
return __spreadArray(__spreadArray([], __read(this.nodes), false), __read(this.edges), false).reduce(function (eMap, model) {
eMap[model.id] = model;
return eMap;
}, {});
},
enumerable: false,
configurable: true
});
Object.defineProperty(GraphModel.prototype, "sortElements", {
/**
* 基于zIndex对元素进行排序。
* todo: 性能优化
*/
get: function () {
var elements = __spreadArray(__spreadArray([], __read(this.nodes), false), __read(this.edges), false).sort(function (a, b) { return a.zIndex - b.zIndex; });
// 只显示可见区域的节点和边
var visibleElements = [];
// TODO: 缓存，优化计算效率 by xutao. So how?
var visibleLt = [
-DEFAULT_VISIBLE_SPACE,
-DEFAULT_VISIBLE_SPACE,
];
var visibleRb = [
this.width + DEFAULT_VISIBLE_SPACE,
this.height + DEFAULT_VISIBLE_SPACE,
];
for (var i = 0; i < elements.length; i++) {
var currentItem = elements[i];
// 如果节点不在可见区域，且不是全元素显示模式，则隐藏节点。
if (currentItem.visible &&
(!this.partial ||
currentItem.isSelected ||
this.isElementInArea(currentItem, visibleLt, visibleRb, false, false))) {
visibleElements.push(currentItem);
}
}
return visibleElements;
},
enumerable: false,
configurable: true
});
Object.defineProperty(GraphModel.prototype, "textEditElement", {
/**
* 当前编辑的元素，低频操作，先循环找。
*/
get: function () {
var textEditNode = this.nodes.find(function (node) { return node.state === ElementState.TEXT_EDIT; });
var textEditEdge = this.edges.find(function (edge) { return edge.state === ElementState.TEXT_EDIT; });
return textEditNode || textEditEdge;
},
enumerable: false,
configurable: true
});
Object.defineProperty(GraphModel.prototype, "selectElements", {
/**
* 当前画布所有被选中的元素
*/
get: function () {
var elements = new Map();
this.nodes.forEach(function (node) {
if (node.isSelected) {
elements.set(node.id, node);
}
});
this.edges.forEach(function (edge) {
if (edge.isSelected) {
elements.set(edge.id, edge);
}
});
return elements;
},
enumerable: false,
configurable: true
});
Object.defineProperty(GraphModel.prototype, "selectNodes", {
get: function () {
var nodes = [];
this.nodes.forEach(function (node) {
if (node.isSelected) {
nodes.push(node);
}
});
return nodes;
},
enumerable: false,
configurable: true
});
/**
* 获取指定区域内的所有元素
* @param leftTopPoint 表示区域左上角的点
* @param rightBottomPoint 表示区域右下角的点
* @param wholeEdge 是否要整个边都在区域内部
* @param wholeNode 是否要整个节点都在区域内部
* @param ignoreHideElement 是否忽略隐藏的节点
*/
// TODO: rename getAreaElement to getElementsInArea or getAreaElements
GraphModel.prototype.getAreaElement = function (leftTopPoint, rightBottomPoint, wholeEdge, wholeNode, ignoreHideElement) {
var _this = this;
if (wholeEdge === void 0) { wholeEdge = true; }
if (wholeNode === void 0) { wholeNode = true; }
if (ignoreHideElement === void 0) { ignoreHideElement = false; }
var areaElements = [];
forEach(__spreadArray(__spreadArray([], __read(this.nodes), false), __read(this.edges), false), function (element) {
var isElementInArea = _this.isElementInArea(element, leftTopPoint, rightBottomPoint, wholeEdge, wholeNode);
if ((!ignoreHideElement || element.visible) && isElementInArea) {
areaElements.push(element);
}
});
return areaElements;
};
/**
* 获取指定类型元素对应的Model
*/
GraphModel.prototype.getModel = function (type) {
return this.modelMap.get(type);
};
/**
* 基于Id获取节点的model
*/
GraphModel.prototype.getNodeModelById = function (nodeId) {
var _a;
if (this.fakeNode && nodeId === this.fakeNode.id) {
return this.fakeNode;
}
return (_a = this.nodesMap[nodeId]) === null || _a === void 0 ? void 0 : _a.model;
};
/**
* 因为流程图所在的位置可以是页面任何地方
* 当内部事件需要获取触发事件时，其相对于画布左上角的位置
* 需要事件触发位置减去画布相对于client的位置
*/
GraphModel.prototype.getPointByClient = function (_a) {
var x1 = _a.x, y1 = _a.y;
var bbox = this.rootEl.getBoundingClientRect();
var domOverlayPosition = {
x: x1 - bbox.left,
y: y1 - bbox.top,
};
var _b = __read(this.transformModel.HtmlPointToCanvasPoint([
domOverlayPosition.x,
domOverlayPosition.y,
]), 2), x = _b[0], y = _b[1];
var canvasOverlayPosition = { x: x, y: y };
return {
domOverlayPosition: domOverlayPosition,
canvasOverlayPosition: canvasOverlayPosition,
};
};
/**
* 判断一个元素是否在指定矩形区域内。
* @param element 节点或者边
* @param lt 左上角点
* @param rb 右下角点
* @param wholeEdge 边的起点和终点都在区域内才算
* @param wholeNode 节点的box都在区域内才算
*/
GraphModel.prototype.isElementInArea = function (element, lt, rb, wholeEdge, wholeNode) {
var _a;
if (wholeEdge === void 0) { wholeEdge = true; }
if (wholeNode === void 0) { wholeNode = true; }
if (element.BaseType === ElementType.NODE) {
element = element;
// 节点是否在选区内，判断逻辑为如果节点的bbox的四个角上的点都在选区内，则判断节点在选区内
var _b = getNodeBBox(element), minX = _b.minX, minY = _b.minY, maxX = _b.maxX, maxY = _b.maxY;
var bboxPointsList = [
{
x: minX,
y: minY,
},
{
x: maxX,
y: minY,
},
{
x: maxX,
y: maxY,
},
{
x: minX,
y: maxY,
},
];
var inArea = wholeNode;
for (var i = 0; i < bboxPointsList.length; i++) {
var _c = bboxPointsList[i], x = _c.x, y = _c.y;
_a = __read(this.transformModel.CanvasPointToHtmlPoint([x, y]), 2), x = _a[0], y = _a[1];
if (isPointInArea([x, y], lt, rb) !== wholeNode) {
inArea = !wholeNode;
break;
}
}
return inArea;
}
if (element.BaseType === ElementType.EDGE) {
element = element;
var startPoint = element.startPoint, endPoint = element.endPoint;
var startHtmlPoint = this.transformModel.CanvasPointToHtmlPoint([
startPoint.x,
startPoint.y,
]);
var endHtmlPoint = this.transformModel.CanvasPointToHtmlPoint([
endPoint.x,
endPoint.y,
]);
var isStartInArea = isPointInArea(startHtmlPoint, lt, rb);
var isEndInArea = isPointInArea(endHtmlPoint, lt, rb);
return wholeEdge
? isStartInArea && isEndInArea
: isStartInArea || isEndInArea;
}
return false;
};
/**
* 使用新的数据重新设置整个画布的元素
* 注意：将会清除画布上所有已有的节点和边
* @param { object } graphData 图数据
*/
GraphModel.prototype.graphDataToModel = function (graphData) {
var _this = this;
// 宽度必然存在，取消重新计算
// if (!this.width || !this.height) {
// this.resize()
// }
if (!graphData) {
this.clearData();
return;
}
this.elementsModelMap.clear();
this.nodeModelMap.clear();
this.edgeModelMap.clear();
if (graphData.nodes) {
this.nodes = map(graphData.nodes, function (node) {
var nodeModel = _this.getModelAfterSnapToGrid(node);
_this.elementsModelMap.set(nodeModel.id, nodeModel);
_this.nodeModelMap.set(nodeModel.id, nodeModel);
return nodeModel;
});
}
else {
this.nodes = [];
}
if (graphData.edges) {
var currEdgeType_1 = this.edgeType;
this.edges = map(graphData.edges, function (edge) {
var _a;
var Model = _this.getModel((_a = edge.type) !== null && _a !== void 0 ? _a : currEdgeType_1);
if (!Model) {
throw new Error("\u627E\u4E0D\u5230".concat(edge.type, "\u5BF9\u5E94\u7684\u8FB9\u3002"));
}
var edgeModel = new Model(edge, _this);
_this.edgeModelMap.set(edgeModel.id, edgeModel);
_this.elementsModelMap.set(edgeModel.id, edgeModel);
return edgeModel;
});
}
else {
this.edges = [];
}
};
/**
* 获取画布数据
*/
GraphModel.prototype.modelToGraphData = function () {
var edges = [];
this.edges.forEach(function (edge) {
var data = edge.getData();
if (data && !edge.virtual)
edges.push(data);
});
var nodes = [];
this.nodes.forEach(function (node) {
var data = node.getData();
if (data && !node.virtual)
nodes.push(data);
});
return {
nodes: nodes,
edges: edges,
};
};
// 用户history记录的数据，忽略拖拽过程中的数据变更
GraphModel.prototype.modelToHistoryData = function () {
var nodeDragging = false;
var nodes = [];
// 如果有节点在拖拽中，不更新history
for (var i = 0; i < this.nodes.length; i++) {
var nodeModel = this.nodes[i];
if (nodeModel.isDragging) {
nodeDragging = true;
break;
}
else {
nodes.push(nodeModel.getHistoryData());
}
}
if (nodeDragging) {
return false;
}
// 如果有边在拖拽中，不更新history
var edgeDragging = false;
var edges = [];
for (var j = 0; j < this.edges.length; j++) {
var edgeMode = this.edges[j];
if (edgeMode.isDragging) {
edgeDragging = true;
break;
}
else {
edges.push(edgeMode.getHistoryData());
}
}
if (edgeDragging) {
return false;
}
return {
nodes: nodes,
edges: edges,
};
};
/**
* 获取边的model
*/
GraphModel.prototype.getEdgeModelById = function (edgeId) {
var _a;
return (_a = this.edgesMap[edgeId]) === null || _a === void 0 ? void 0 : _a.model;
};
/**
* 获取节点或者边的model
*/
GraphModel.prototype.getElement = function (id) {
return this.modelsMap[id];
};
/**
* 所有节点上所有边的model
*/
GraphModel.prototype.getNodeEdges = function (nodeId) {
var edges = [];
for (var i = 0; i < this.edges.length; i++) {
var edgeModel = this.edges[i];
var nodeAsSource = edgeModel.sourceNodeId === nodeId;
var nodeAsTarget = edgeModel.targetNodeId === nodeId;
if (nodeAsSource || nodeAsTarget) {
edges.push(edgeModel);
}
}
return edges;
};
/**
* 获取选中的元素数据
* @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。
* 复制的时候不能包括此类边, 因为复制的时候不允许悬空的边
*/
GraphModel.prototype.getSelectElements = function (isIgnoreCheck) {
if (isIgnoreCheck === void 0) { isIgnoreCheck = true; }
var elements = this.selectElements;
var graphData = {
nodes: [],
edges: [],
};
elements.forEach(function (element) {
if (element.BaseType === ElementType.NODE) {
graphData.nodes.push(element.getData());
}
if (element.BaseType === ElementType.EDGE) {
var edgeData = element.getData();
var isNodeSelected = elements.get(edgeData.sourceNodeId) &&
elements.get(edgeData.targetNodeId);
if (isIgnoreCheck || isNodeSelected) {
graphData.edges.push(edgeData);
}
}
});
return graphData;
};
/**
* 修改对应元素 model 中的属性
* 注意：此方法慎用，除非您对logicflow内部有足够的了解。
* 大多数情况下，请使用setProperties、updateText、changeNodeId等方法。
* 例如直接使用此方法修改节点的id,那么就是会导致连接到此节点的边的sourceNodeId出现找不到的情况。
* @param {string} id 元素id
* @param {object} attributes 需要更新的属性
*/
GraphModel.prototype.updateAttributes = function (id, attributes) {
var element = this.getElement(id);
element === null || element === void 0 ? void 0 : element.updateAttributes(attributes);
};
/**
* 修改节点的id， 如果不传新的id，会内部自动创建一个。
* @param { string } nodeId 将要被修改的id
* @param { string } newId 可选，修改后的id
* @returns 修改后的节点id, 如果传入的oldId不存在，返回空字符串
*/
GraphModel.prototype.changeNodeId = function (nodeId, newId) {
if (!newId) {
newId = createUuid();
}
if (this.nodesMap[newId]) {
console.warn("\u5F53\u524D\u6D41\u7A0B\u56FE\u5DF2\u5B58\u5728\u8282\u70B9".concat(newId, ", \u4FEE\u6539\u5931\u8D25"));
return '';
}
if (!this.nodesMap[nodeId]) {
console.warn("\u5F53\u524D\u6D41\u7A0B\u56FE\u627E\u4E0D\u5230\u8282\u70B9".concat(nodeId, ", \u4FEE\u6539\u5931\u8D25"));
return '';
}
this.edges.forEach(function (edge) {
if (edge.sourceNodeId === nodeId) {
edge.sourceNodeId = newId;
}
if (edge.targetNodeId === nodeId) {
edge.targetNodeId = newId;
}
});
this.nodesMap[nodeId].model.id = newId;
this.nodesMap[newId] = this.nodesMap[nodeId];
return newId;
};
/**
* 修改边的id， 如果不传新的id，会内部自动创建一个。
* @param { string } oldId 将要被修改的id
* @param { string } newId 可选，修改后的id
* @returns 修改后的节点id, 如果传入的oldId不存在，返回空字符串
*/
GraphModel.prototype.changeEdgeId = function (oldId, newId) {
if (!newId) {
newId = createUuid();
}
if (this.edgesMap[newId]) {
console.warn("\u5F53\u524D\u6D41\u7A0B\u56FE\u5DF2\u5B58\u5728\u8FB9: ".concat(newId, ", \u4FEE\u6539\u5931\u8D25"));
return '';
}
if (!this.edgesMap[oldId]) {
console.warn("\u5F53\u524D\u6D41\u7A0B\u56FE\u627E\u4E0D\u5230\u8FB9: ".concat(newId, ", \u4FEE\u6539\u5931\u8D25"));
return '';
}
this.edges.forEach(function (edge) {
if (edge.id === oldId) {
// edge.id = newId
edge.changeEdgeId(newId);
}
});
return newId;
};
/**
* 获取元素的文本模式
* @param model
*/
GraphModel.prototype.getTextModel = function (model) {
var _a = this.editConfigModel, textMode = _a.textMode, nodeTextMode = _a.nodeTextMode, edgeTextMode = _a.edgeTextMode;
// textMode 的优先级：
// 元素自身 model.textMode > editConfigModel.node(edge)TextMode > editConfigModel.textMode
if (model.BaseType === ElementType.NODE) {
return model.textMode || nodeTextMode || textMode || TextMode.TEXT;
}
// 同上
if (model.BaseType === ElementType.EDGE) {
return model.textMode || edgeTextMode || textMode || TextMode.TEXT;
}
};
/**
* 更新元素的文本模式
* @param mode
* @param model
*/
GraphModel.prototype.setTextMode = function (mode, model) {
// 如果有传入 model，则直接更新 model 的 textMode
if (model) {
// model.updateTextMode(mode)
}
// 调用 editConfigModel 的方法更新 textMode
this.editConfigModel.updateEditConfig({ textMode: mode });
};
/**
* 内部保留方法，请勿直接使用
*/
GraphModel.prototype.setFakeNode = function (nodeModel) {
this.fakeNode = nodeModel;
};
/**
* 内部保留方法，请勿直接使用
*/
GraphModel.prototype.removeFakeNode = function () {
this.fakeNode = null;
};
/**
* 设置指定类型的Model,请勿直接使用
*/
GraphModel.prototype.setModel = function (type, ModelClass) {
return this.modelMap.set(type, ModelClass);
};
/**
* 将某个元素放置到顶部。
* 如果堆叠模式为默认模式，则将原置顶元素重新恢复原有层级。
* 如果堆叠模式为递增模式，则将需指定元素zIndex设置为当前最大zIndex + 1。
* @see todo link 堆叠模式
* @param id 元素Id
*/
GraphModel.prototype.toFront = function (id) {
var _a, _b, _c;
var element = ((_a = this.nodesMap[id]) === null || _a === void 0 ? void 0 : _a.model) || ((_b = this.edgesMap[id]) === null || _b === void 0 ? void 0 : _b.model);
if (element) {
if (this.overlapMode === OverlapMode.DEFAULT) {
(_c = this.topElement) === null || _c === void 0 ? void 0 : _c.setZIndex();
element.setZIndex(ELEMENT_MAX_Z_INDEX);
this.topElement = element;
}
if (this.overlapMode === OverlapMode.INCREASE) {
this.setElementZIndex(id, 'top');
}
}
};
/**
* 设置元素的zIndex.
* 注意：默认堆叠模式下，不建议使用此方法。
* @see todo link 堆叠模式
* @param id 元素id
* @param zIndex zIndex的值，可以传数字，也支持传入 'top' 和 'bottom'
*/
GraphModel.prototype.setElementZIndex = function (id, zIndex) {
var _a, _b;
var element = ((_a = this.nodesMap[id]) === null || _a === void 0 ? void 0 : _a.model) || ((_b = this.edgesMap[id]) === null || _b === void 0 ? void 0 : _b.model);
if (element) {
var index = void 0;
if (typeof zIndex === 'number') {
index = zIndex;
}
else {
if (zIndex === 'top') {
index = getZIndex();
}
if (zIndex === 'bottom') {
index = getMinIndex();
}
}
element.setZIndex(index);
}
};
/**
* 删除节点
* @param {string} nodeId 节点Id
*/
GraphModel.prototype.deleteNode = function (nodeId) {
var nodeModel = this.nodesMap[nodeId].model;
var nodeData = nodeModel.getData();
this.deleteEdgeBySource(nodeId);
this.deleteEdgeByTarget(nodeId);
this.nodes.splice(this.nodesMap[nodeId].index, 1);
this.eventCenter.emit(EventType.NODE_DELETE, {
data: nodeData,
model: nodeModel,
});
};
/**
* 添加节点
* @param nodeConfig 节点配置
* @param eventType 新增节点事件类型，默认EventType.NODE_ADD, 在Dnd拖拽时，会传入EventType.NODE_DND_ADD
* @param event MouseEvent 鼠标事件
*/
GraphModel.prototype.addNode = function (nodeConfig, eventType, event) {
if (eventType === void 0) { eventType = EventType.NODE_ADD; }
var originNodeData = formatData(nodeConfig);
// 添加节点的时候，如果这个节点 id 已经存在，则采用新 id
var id = originNodeData.id;
if (id && this.nodesMap[id]) {
delete originNodeData.id;
}
var nodeModel = this.getModelAfterSnapToGrid(originNodeData);
this.nodes.push(nodeModel);
var nodeData = nodeModel.getData();
var eventData = { data: nodeData };
if (event) {
eventData.e = event;
}
this.eventCenter.emit(eventType, eventData);
return nodeModel;
};
/**
* 将node节点位置进行grid修正
* 同时处理node内文字的偏移量
* 返回一个位置修正过的复制节点NodeModel
* @param node
*/
GraphModel.prototype.getModelAfterSnapToGrid = function (node) {
var Model = this.getModel(node.type);
var snapGrid = this.editConfigModel.snapGrid;
if (!Model) {
throw new Error("\u627E\u4E0D\u5230".concat(node.type, "\u5BF9\u5E94\u7684\u8282\u70B9\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u5DF2\u6CE8\u518C\u6B64\u7C7B\u578B\u8282\u70B9\u3002"));
}
var nodeX = node.x, nodeY = node.y;
// 根据 grid 修正节点的 x, y
if (nodeX && nodeY) {
node.x = snapToGrid(nodeX, this.gridSize, snapGrid);
node.y = snapToGrid(nodeY, this.gridSize, snapGrid);
if (typeof node.text === 'object' && node.text !== null) {
// 原来的处理是：node.text.x -= getGridOffset(nodeX, this.gridSize)
// 由于snapToGrid()使用了Math.round()四舍五入的做法，因此无法判断需要执行
// node.text.x = node.text.x + getGridOffset()
// 还是
// node.text.x = node.text.x - getGridOffset()
// 直接改为node.x - nodeX就可以满足上面的要求
node.text.x += node.x - nodeX;
node.text.y += node.y - nodeY;
}
}
var nodeModel = new Model(node, this);
this.nodeModelMap.set(nodeModel.id, nodeModel);
this.elementsModelMap.set(nodeModel.id, nodeModel);
return nodeModel;
};
/**
* 克隆节点
* @param nodeId 节点Id
*/
GraphModel.prototype.cloneNode = function (nodeId) {
var targetNode = this.getNodeModelById(nodeId);
var data = targetNode === null || targetNode === void 0 ? void 0 : targetNode.getData();
if (data) {
data.x += 30;
data.y += 30;
data.id = '';
if (typeof data.text === 'object' && data.text !== null) {
data.text.x += 30;
data.text.y += 30;
}
var nodeModel = this.addNode(data);
nodeModel.setSelected(true);
targetNode === null || targetNode === void 0 ? void 0 : targetNode.setSelected(false);
return nodeModel.getData();
}
};
/**
* 移动节点-相对位置
* @param nodeId 节点Id
* @param deltaX X轴移动距离
* @param deltaY Y轴移动距离
* @param isIgnoreRule 是否忽略移动规则限制
*/
GraphModel.prototype.moveNode = function (nodeId, deltaX, deltaY, isIgnoreRule) {
var _a;
if (isIgnoreRule === void 0) { isIgnoreRule = false; }
// 1) 移动节点
var node = this.nodesMap[nodeId];
if (!node) {
console.warn("\u4E0D\u5B58\u5728id\u4E3A".concat(nodeId, "\u7684\u8282\u70B9"));
return;
}
var nodeModel = node.model;
_a = __read(nodeModel.getMoveDistance(deltaX, deltaY, isIgnoreRule), 2), deltaX = _a[0], deltaY = _a[1];
// 2) 移动边
this.moveEdge(nodeId, deltaX, deltaY);
};
/**
* 移动节点-绝对位置
* @param nodeId 节点Id
* @param x X轴目标位置
* @param y Y轴目标位置
* @param isIgnoreRule 是否忽略条件，默认为 false
*/
GraphModel.prototype.moveNode2Coordinate = function (nodeId, x, y, isIgnoreRule) {
if (isIgnoreRule === void 0) { isIgnoreRule = false; }
// 1) 移动节点
var node = this.nodesMap[nodeId];
if (!node) {
console.warn("\u4E0D\u5B58\u5728id\u4E3A".concat(nodeId, "\u7684\u8282\u70B9"));
return;
}
var nodeModel = node.model;
var originX = nodeModel.x, originY = nodeModel.y;
var deltaX = x - originX;
var deltaY = y - originY;
this.moveNode(nodeId, deltaX, deltaY, isIgnoreRule);
};
/**
* 显示节点、连线文本编辑框
* @param id 节点 or 连线 id
*/
GraphModel.prototype.editText = function (id) {
this.setElementStateById(id, ElementState.TEXT_EDIT);
};
/**
* 给两个节点之间添加一条边
* @param {object} edgeConfig
*/
GraphModel.prototype.addEdge = function (edgeConfig) {
var edgeOriginData = formatData(edgeConfig);
// 边的类型优先级：自定义>全局>默认
var type = edgeOriginData.type;
if (!type) {
type = this.edgeType;
}
if (edgeOriginData.id && this.edgesMap[edgeOriginData.id]) {
delete edgeOriginData.id;
delete edgeOriginData.sourceAnchorId;
delete edgeOriginData.targetAnchorId;
}
var Model = this.getModel(type);
if (!Model) {
throw new Error("\u627E\u4E0D\u5230".concat(type, "\u5BF9\u5E94\u7684\u8FB9\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u5DF2\u6CE8\u518C\u6B64\u7C7B\u578B\u8FB9\u3002"));
}
var edgeModel = new Model(__assign(__assign({}, edgeOriginData), { type: type }), this);
this.edgeModelMap.set(edgeModel.id, edgeModel);
this.elementsModelMap.set(edgeModel.id, edgeModel);
var edgeData = edgeModel.getData();
this.edges.push(edgeModel);
this.eventCenter.emit(EventType.EDGE_ADD, { data: edgeData });
return edgeModel;
};
/**
* 移动边，内部方法，请勿直接使用
*/
GraphModel.prototype.moveEdge = function (nodeId, deltaX, deltaY) {
/* 更新相关边位置 */
for (var i = 0; i < this.edges.length; i++) {
var edgeModel = this.edges[i];
var _a = edgeModel.textPosition, x = _a.x, y = _a.y;
var nodeAsSource = this.edges[i].sourceNodeId === nodeId;
var nodeAsTarget = this.edges[i].targetNodeId === nodeId;
if (nodeAsSource) {
edgeModel.moveStartPoint(deltaX, deltaY);
}
if (nodeAsTarget) {
edgeModel.moveEndPoint(deltaX, deltaY);
}
// 如果有文案了，当节点移动引起文案位置修改时，找出当前文案位置与最新边距离最短距离的点
// 最大程度保持节点位置不变且在边上
if (nodeAsSource || nodeAsTarget) {
this.handleEdgeTextMove(edgeModel, x, y);
}
}
};
/**
* 如果有文案了，当节点移动引起文案位置修改时，找出当前文案位置与最新边距离最短距离的点
* 最大程度保持节点位置不变且在边上
* @param edgeModel 边的数据管理类
* @param x X轴移动距离
* @param y Y轴移动距离
*/
GraphModel.prototype.handleEdgeTextMove = function (edgeModel, x, y) {
var _a;
// todo: 找到更好的边位置移动处理方式
// 如果是自定义边文本位置，则移动节点的时候重新计算其位置
if (edgeModel.customTextPosition) {
edgeModel.resetTextPosition();
return;
}
if (edgeModel.modelType === ModelType.POLYLINE_EDGE &&
((_a = edgeModel.text) === null || _a === void 0 ? void 0 : _a.value)) {
var textPosition = edgeModel.text;
var newPoint = getClosestPointOfPolyline(textPosition, edgeModel.points);
edgeModel.moveText(newPoint.x - textPosition.x, newPoint.y - textPosition.y);
}
var _b = edgeModel.textPosition, x1 = _b.x, y1 = _b.y;
edgeModel.moveText(x1 - x, y1 - y);
};
/**
* 删除两节点之间的边
* @param sourceNodeId 边的起始节点
* @param targetNodeId 边的目的节点
*/
GraphModel.prototype.deleteEdgeBySourceAndTarget = function (sourceNodeId, targetNodeId) {
for (var i = 0; i < this.edges.length; i++) {
if (this.edges[i].sourceNodeId === sourceNodeId &&
this.edges[i].targetNodeId === targetNodeId) {
var edgeData = this.edges[i].getData();
this.edges.splice(i, 1);
i--;
this.eventCenter.emit(EventType.EDGE_DELETE, { data: edgeData });
}
}
};
/**
* 基于边Id删除边
*/
GraphModel.prototype.deleteEdgeById = function (id) {
var edge = this.edgesMap[id];
if (!edge) {
return;
}
var idx = this.edgesMap[id].index;
var edgeData = this.edgesMap[id].model.getData();
this.edges.splice(idx, 1);
this.eventCenter.emit(EventType.EDGE_DELETE, { data: edgeData });
};
/**
* 删除以节点Id为起点的所有边
*/
GraphModel.prototype.deleteEdgeBySource = function (sourceNodeId) {
for (var i = 0; i < this.edges.length; i++) {
if (this.edges[i].sourceNodeId === sourceNodeId) {
var edgeData = this.edges[i].getData();
this.edges.splice(i, 1);
i--;
this.eventCenter.emit(EventType.EDGE_DELETE, { data: edgeData });
}
}
};
/**
* 删除以节点Id为终点的所有边
*/
GraphModel.prototype.deleteEdgeByTarget = function (targetNodeId) {
for (var i = 0; i < this.edges.length; i++) {
if (this.edges[i].targetNodeId === targetNodeId) {
var edgeData = this.edges[i].getData();
this.edges.splice(i, 1);
i--;
this.eventCenter.emit(EventType.EDGE_DELETE, { data: edgeData });
}
}
};
/**
* 设置元素的状态，在需要保证整个画布上所有的元素只有一个元素拥有此状态时可以调用此方法。
* 例如文本编辑、菜单显示等。
* additionStateData: 传递的额外值，如菜单显示的时候，需要传递期望菜单显示的位置。
*/
GraphModel.prototype.setElementStateById = function (id, state, additionStateData) {
this.nodes.forEach(function (node) {
if (node.id === id) {
node.setElementState(state, additionStateData);
}
else {
node.setElementState(ElementState.DEFAULT);
}
});
this.edges.forEach(function (edge) {
if (edge.id === id) {
edge.setElementState(state, additionStateData);
}
else {
edge.setElementState(ElementState.DEFAULT);
}
});
};
/**
* 更新节点或边的文案
* @param id 节点或者边id
* @param value 文案内容
*/
GraphModel.prototype.updateText = function (id, value) {
var element = find(__spreadArray(__spreadArray([], __read(this.nodes), false), __read(this.edges), false), function (item) { return item.id === id; });
element === null || element === void 0 ? void 0 : element.updateText(value);
};
/**
* 选中节点
* @param id 节点Id
* @param multiple 是否为多选，如果为多选，则不去掉原有已选择节点的选中状态
*/
GraphModel.prototype.selectNodeById = function (id, multiple) {
var _a;
if (multiple === void 0) { multiple = false; }
if (!multiple) {
this.clearSelectElements();
}
var selectElement = (_a = this.nodesMap[id]) === null || _a === void 0 ? void 0 : _a.model;
selectElement === null || selectElement === void 0 ? void 0 : selectElement.setSelected(true);
};
/**
* 选中边
* @param id 边Id
* @param multiple 是否为多选，如果为多选，则不去掉原已选中边的状态
*/
GraphModel.prototype.selectEdgeById = function (id, multiple) {
var _a;
if (multiple === void 0) { multiple = false; }
if (!multiple) {
this.clearSelectElements();
}
var selectElement = (_a = this.edgesMap[id]) === null || _a === void 0 ? void 0 : _a.model;
selectElement === null || selectElement === void 0 ? void 0 : selectElement.setSelected(true);
};
/**
* 将图形选中
* @param id 选择元素ID
* @param multiple 是否允许多选，如果为true，不会将上一个选中的元素重置
*/
GraphModel.prototype.selectElementById = function (id, multiple) {
if (multiple === void 0) { multiple = false; }
if (!multiple) {
this.clearSelectElements();
}
var selectElement = this.getElement(id);
selectElement === null || selectElement === void 0 ? void 0 : selectElement.setSelected(true);
};
GraphModel.prototype.deselectElementById = function (id) {
var element = this.getElement(id);
if (element) {
element.setSelected(false);
}
};
/**
* 将所有选中的元素设置为非选中
*/
GraphModel.prototype.clearSelectElements = function () {
var _a;
this.selectElements.forEach(function (element) {
element === null || element === void 0 ? void 0 : element.setSelected(false);
});
this.selectElements.clear();
/**
* 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
*/
if (this.overlapMode === OverlapMode.DEFAULT) {
(_a = this.topElement) === null || _a === void 0 ? void 0 : _a.setZIndex();
}
};
/**
* 批量移动节点，节点移动的时候，会动态计算所有节点与未移动节点的边位置
* 移动的节点之间的边会保持相对位置
*/
GraphModel.prototype.moveNodes = function (nodeIds, deltaX, deltaY, isIgnoreRule) {
var _a, _b, _c;
var _this = this;
if (isIgnoreRule === void 0) { isIgnoreRule = false; }
// FIX: https://github.com/didi/LogicFlow/issues/1015
// 如果节点之间存在连线，则只移动连线一次。
var nodeIdMap = nodeIds.reduce(function (acc, cur) {
var _a;
var nodeModel = (_a = _this.nodesMap[cur]) === null || _a === void 0 ? void 0 : _a.model;
if (nodeModel) {
acc[cur] = nodeModel.getMoveDistance(deltaX, deltaY, isIgnoreRule);
}
return acc;
}, {});
for (var i = 0; i < this.edges.length; i++) {
var edgeModel = this.edges[i];
var _d = edgeModel.textPosition, x = _d.x, y = _d.y;
var sourceMoveDistance = nodeIdMap[edgeModel.sourceNodeId];
var targetMoveDistance = nodeIdMap[edgeModel.targetNodeId];
var textDistanceX = void 0;
var textDistanceY = void 0;
if (sourceMoveDistance &&
targetMoveDistance &&
edgeModel.modelType === ModelType.POLYLINE_EDGE) {
// 移动框选区时，如果边polyline在框选范围内，则边的轨迹pointsList也要整体移动
;
_a = __read(sourceMoveDistance, 2), textDistanceX = _a[0], textDistanceY = _a[1];
edgeModel.updatePointsList(textDistanceX, textDistanceY);
}
else {
if (sourceMoveDistance) {
;
_b = __read(sourceMoveDistance, 2), textDistanceX = _b[0], textDistanceY = _b[1];
edgeModel.moveStartPoint(textDistanceX, textDistanceY);
}
if (targetMoveDistance) {
;
_c = __read(targetMoveDistance, 2), textDistanceX = _c[0], textDistanceY = _c[1];
edgeModel.moveEndPoint(textDistanceX, textDistanceY);
}
}
if (sourceMoveDistance || targetMoveDistance) {
// https://github.com/didi/LogicFlow/issues/1191
// moveNode()跟moveNodes()没有统一处理方式，moveNodes()缺失了下面的逻辑
// moveNode()：当节点移动引起文案位置修改时，找出当前文案位置与最新边距离最短距离的点，最大程度保持节点位置不变且在边上
// 因此将moveNode()处理边文字的逻辑抽离出来，统一moveNode()跟moveNodes()的处理逻辑
this.handleEdgeTextMove(edgeModel, x, y);
}
}
};
/**
* 添加节点移动限制规则，在节点移动的时候触发。
* 如果方法返回false, 则会阻止节点移动。
* @param fn function
* @example
*
* graphModel.addNodeMoveRules((nodeModel, x, y) => {
* if (nodeModel.properties.disabled) {
* return false
* }
* return true
* })
*
*/
GraphModel.prototype.addNodeMoveRules = function (fn) {
if (!this.nodeMoveRules.includes(fn)) {
this.nodeMoveRules.push(fn);
}
};
GraphModel.prototype.addNodeResizeRules = function (fn) {
if (!this.nodeResizeRules.includes(fn)) {
this.nodeResizeRules.push(fn);
}
};
/**
* 设置默认的边类型
* 也就是设置在节点直接有用户手动绘制的连线类型。
* @param type LFOptions.EdgeType
*/
GraphModel.prototype.setDefaultEdgeType = function (type) {
this.edgeType = type;
};
/**
* 修改指定节点类型
* @param id 节点id
* @param type 节点类型
*/
GraphModel.prototype.changeNodeType = function (id, type) {
var nodeModel = this.getNodeModelById(id);
if (!nodeModel) {
console.warn("\u627E\u4E0D\u5230id\u4E3A".concat(id, "\u7684\u8282\u70B9"));
return;
}
var data = nodeModel.getData();
data.type = type;
var Model = this.getModel(type);
if (!Model) {
throw new Error("\u627E\u4E0D\u5230".concat(type, "\u5BF9\u5E94\u7684\u8282\u70B9\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u5DF2\u6CE8\u518C\u6B64\u7C7B\u578B\u8282\u70B9\u3002"));
}
var newNodeModel = new Model(data, this);
this.nodes.splice(this.nodesMap[id].index, 1, newNodeModel);
// 微调边
var edgeModels = this.getNodeEdges(id);
edgeModels.forEach(function (edge) {
if (edge.sourceNodeId === id) {
var point = getNodeAnchorPosition(newNodeModel, edge.startPoint, newNodeModel.width, newNodeModel.height);
edge.updateStartPoint(point);
}
if (edge.targetNodeId === id) {
var point = getNodeAnchorPosition(newNodeModel, edge.endPoint, newNodeModel.width, newNodeModel.height);
edge.updateEndPoint(point);
}
});
};
/**
* 切换边的类型
* @param id 边Id
* @param type 边类型
*/
GraphModel.prototype.changeEdgeType = function (id, type) {
var edgeModel = this.getEdgeModelById(id);
if (!edgeModel) {
console.warn("\u627E\u4E0D\u5230id\u4E3A".concat(id, "\u7684\u8FB9"));
return;
}
if (edgeModel.type === type) {
return;
}
var data = edgeModel.getData();
data.type = type;
var Model = this.getModel(type);
if (!Model) {
throw new Error("\u627E\u4E0D\u5230".concat(type, "\u5BF9\u5E94\u7684\u8282\u70B9\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u5DF2\u6CE8\u518C\u6B64\u7C7B\u578B\u8282\u70B9\u3002"));
}
// 为了保持切换类型时不复用上一个类型的轨迹
delete data.pointsList;
var newEdgeModel = new Model(data, this);
this.edges.splice(this.edgesMap[id].index, 1, newEdgeModel);
};
/**
* 获取所有以此节点为终点的边
*/
GraphModel.prototype.getNodeIncomingEdge = function (nodeId) {
var edges = [];
this.edges.forEach(function (edge) {
if (edge.targetNodeId === nodeId) {
edges.push(edge);
}
});
return edges;
};
/**
* 获取所有以此节点为起点的边
*/
GraphModel.prototype.getNodeOutgoingEdge = function (nodeId) {
var edges = [];
this.edges.forEach(function (edge) {
if (edge.sourceNodeId === nodeId) {
edges.push(edge);
}
});
return edges;
};
/**
* 获取所有以此锚点为终点的边
*/
GraphModel.prototype.getAnchorIncomingEdge = function (anchorId) {
var edges = [];
this.edges.forEach(function (edge) {
if (edge.targetAnchorId === anchorId) {
edges.push(edge);
}
});
return edges;
};
/**
* 获取所有以此锚点为起点的边
*/
GraphModel.prototype.getAnchorOutgoingEdge = function (anchorId) {
var edges = [];
this.edges.forEach(function (edge) {
if (edge.sourceAnchorId === anchorId) {
edges.push(edge);
}
});
return edges;
};
/**
* 获取节点连接到的所有起始节点
*/
GraphModel.prototype.getNodeIncomingNode = function (nodeId) {
var _this = this;
var nodes = [];
this.edges.forEach(function (edge) {
var _a;
if (edge.targetNodeId === nodeId) {
nodes.push((_a = _this.nodesMap[edge.sourceNodeId]) === null || _a === void 0 ? void 0 : _a.model);
}
});
return nodes;
};
/**
* 获取节点所有的下一级节点
*/
GraphModel.prototype.getNodeOutgoingNode = function (nodeId) {
var _this = this;
var nodes = [];
this.edges.forEach(function (edge) {
if (edge.sourceNodeId === nodeId) {
nodes.push(_this.nodesMap[edge.targetNodeId].model);
}
});
return nodes;
};
/**
* 设置主题
* todo docs link
*/
GraphModel.prototype.setTheme = function (style, themeMode) {
var _a;
if (themeMode) {
// 修改背景颜色
backgroundModeMap[themeMode] &&
this.updateBackgroundOptions(__assign(__assign({}, (typeof this.background === 'object' ? this.background : {})), backgroundModeMap[themeMode]));
gridModeMap[themeMode] &&
this.updateGridOptions(Grid.getGridOptions(__assign(__assign({}, this.grid), gridModeMap[themeMode])));
}
if (style.background) {
this.updateBackgroundOptions(style.background);
}
if (style.grid) {
var formattedGrid = Grid.getGridOptions((_a = style.grid) !== null && _a !== void 0 ? _a : false);
this.updateGridOptions(formattedGrid);
}
this.theme = updateTheme(__assign(__assign({}, this.customStyles), style), themeMode);
this.customStyles = __assign(__assign({}, this.customStyles), style);
};
/**
* 设置主题
* todo docs link
*/
GraphModel.prototype.getTheme = function () {
var _a = this, background = _a.background, grid = _a.grid;
var theme = __assign(__assign({}, cloneDeep(this.theme)), { background: background, grid: grid });
return theme;
};
/**
* 更新网格配置
*/
GraphModel.prototype.updateGridOptions = function (options) {
merge(this.grid, options);
};
/**
* 更新网格尺寸
*/
GraphModel.prototype.updateGridSize = function (size) {
this.gridSize = size;
};
/**
* 更新背景配置
*/
GraphModel.prototype.updateBackgroundOptions = function (options) {
if (isBoolean(options) || isBoolean(this.background)) {
this.background = options;
}
else {
this.background = __assign(__assign({}, this.background), options);
}
};
/**
* 重新设置