@logicflow/extension
Version:
LogicFlow Extensions
385 lines (384 loc) • 14.6 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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 __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 { get } from 'lodash-es';
import { h, PolygonNode, PolygonNodeModel, } from '@logicflow/core';
var NodeSelectionView = /** @class */ (function (_super) {
__extends(NodeSelectionView, _super);
function NodeSelectionView() {
return _super !== null && _super.apply(this, arguments) || this;
}
NodeSelectionView.prototype.getLabelShape = function () {
var _a = this.props.model, id = _a.id, x = _a.x, y = _a.y, width = _a.width, height = _a.height, properties = _a.properties;
var style = this.props.model.getNodeStyle();
return h('svg', {
x: x - width / 2,
y: y - height / 2,
width: 50,
height: 24,
style: 'z-index: 0; background: none; overflow: auto;',
}, [
properties.labelText
? h('text', {
x: 0,
y: -5,
fontSize: '16px',
fill: style.stroke,
}, properties.labelText)
: '',
properties.disabledDelete
? ''
: h('text', {
x: properties.labelText ? 50 : 0,
y: -5,
fontSize: '24px',
cursor: 'pointer',
fill: style.stroke,
onclick: this.handleCustomDeleteIconClick.bind(this, id),
}, 'x'),
]);
};
NodeSelectionView.prototype.getShape = function () {
var _a = this.props.model, x = _a.x, y = _a.y, width = _a.width, height = _a.height, id = _a.id;
var style = this.props.model.getNodeStyle();
return h('g', {}, [
h('rect', __assign(__assign({}, style), { x: x - width / 2, y: y - height / 2, width: width, height: height, id: id })),
this.getLabelShape(),
]);
};
// 避免点击时，该节点置于最高层，挡住内部节点
NodeSelectionView.prototype.toFront = function () { };
/**
* 点击删除
* @param id
*/
NodeSelectionView.prototype.handleCustomDeleteIconClick = function (id) {
var graphModel = this.props.graphModel;
graphModel.deleteNode(id);
};
return NodeSelectionView;
}(PolygonNode));
var NodeSelectionModel = /** @class */ (function (_super) {
__extends(NodeSelectionModel, _super);
function NodeSelectionModel() {
var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
_this.d = 10;
_this.isResize = false;
return _this;
}
NodeSelectionModel.prototype.initNodeData = function (data) {
data.text = {
value: '',
x: data.x,
y: data.y,
draggable: false,
editable: false,
};
_super.prototype.initNodeData.call(this, data);
this.zIndex = 0;
this.draggable = true;
};
NodeSelectionModel.prototype.setAttributes = function () {
var _this = this;
var _a;
// 默认不显示
this.points = [];
// 图render的时候，会把所有nodes数据实例化，全部实例化完成后，放到nodesMap里。
// 节点的setAttributes在实例化的时候执行第一次
// updatePointsByNodes中的getNodeModelById方法，是从nodesMap取的数据，第一次就拿不到，所以要加setTimeout
if (((_a = this.properties) === null || _a === void 0 ? void 0 : _a.node_selection_ids).length > 1) {
setTimeout(function () {
var _a;
_this.updatePointsByNodes(((_a = _this.properties) === null || _a === void 0 ? void 0 : _a.node_selection_ids) || []);
});
}
};
NodeSelectionModel.prototype.getNodeStyle = function () {
var style = _super.prototype.getNodeStyle.call(this);
style.stroke = this.properties.strokeColor || '#008000';
style.strokeDasharray = '10 5';
return style;
};
NodeSelectionModel.prototype.getDefaultAnchor = function () {
return [];
};
/**
* 更新points - 多边形顶点坐标集合
* @param points
*/
NodeSelectionModel.prototype.updatePoints = function (points) {
this.points = points;
};
/**
* 更新x y - 多边形中点坐标
*/
NodeSelectionModel.prototype.updateCoordinate = function (_a) {
var x = _a.x, y = _a.y;
this.x = x;
this.y = y;
};
/**
* 计算新的 points 和 x y
*/
NodeSelectionModel.prototype.updatePointsByNodes = function (nodesIds) {
var _this = this;
var points = [];
var minX = Infinity;
var minY = Infinity;
var maxX = -Infinity;
var maxY = -Infinity;
nodesIds.forEach(function (id) {
var model = _this.graphModel.getNodeModelById(id);
if (!model)
return;
var width = model.width, height = model.height, x = model.x, y = model.y;
minX = Math.min(minX, x - width / 2 - _this.d);
minY = Math.min(minY, y - height / 2 - _this.d);
maxX = Math.max(maxX, x + width / 2 + _this.d);
maxY = Math.max(maxY, y + height / 2 + _this.d);
});
points.push([minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY]);
if ([minX, minY, maxX, maxY].some(function (n) { return Math.abs(n) === Infinity; }))
return;
this.updatePoints(points);
this.updateCoordinate({
x: (maxX + minX) / 2,
y: (maxY + minY) / 2,
});
};
NodeSelectionModel.prototype.resize = function (resizeInfo) {
var _a;
this.isResize = true;
var width = resizeInfo.width, height = resizeInfo.height;
var scale = {
x: width / this.width,
y: height / this.height,
};
var childIds = (this.properties.node_selection_ids || []).slice();
var childModels = [];
var usedGroupId = new Set();
while (childIds.length) {
var id = childIds.shift();
var node = (_a = this.graphModel.nodesMap[id]) === null || _a === void 0 ? void 0 : _a.model;
if (!node) {
continue;
}
if (!isNodeSelectionModel(node)) {
childModels.push(node);
continue;
}
// 跳出循环引用
if (usedGroupId.has(node.id)) {
continue;
}
usedGroupId.add(node.id);
childIds.push.apply(childIds, __spreadArray([], __read((node.properties.node_selection_ids || [])), false));
}
var begin = {
x: this.x - this.width / 2,
y: this.y - this.height / 2,
};
var res = _super.prototype.resize.call(this, resizeInfo);
var end = {
x: this.x - this.width / 2,
y: this.y - this.height / 2,
};
childModels.forEach(function (node) {
node.width = node.width * scale.x;
node.height = node.height * scale.y;
var deltaX = (node.x - begin.x) * scale.x + end.x - node.x;
var deltaY = (node.y - begin.y) * scale.y + end.y - node.y;
node.move(deltaX, deltaY, true);
});
this.isResize = false;
return res;
};
return NodeSelectionModel;
}(PolygonNodeModel));
var NODE_SELECTION_TYPE = 'node-selection';
var NodeSelection = /** @class */ (function () {
function NodeSelection(_a) {
var lf = _a.lf;
this.selectNodes = []; // 选择的nodes
this.d = 10;
this.lf = lf;
lf.register({
type: NODE_SELECTION_TYPE,
view: NodeSelectionView,
model: NodeSelectionModel,
});
}
Object.defineProperty(NodeSelection.prototype, "selectNodesIds", {
/**
* 获取所选node的id数组
*/
get: function () {
return this.selectNodes.map(function (node) { return node.id; });
},
enumerable: false,
configurable: true
});
/**
* 新建node-selection节点
*/
NodeSelection.prototype.addNodeSelection = function () {
var node = this.lf.addNode({
type: 'node-selection',
text: '',
properties: {
node_selection_ids: this.selectNodesIds,
},
x: 0,
y: 0,
});
node.updatePointsByNodes(this.selectNodesIds);
};
/**
* 更新node-selection节点
*/
NodeSelection.prototype.updateNodeSelection = function () {
var _a;
var nodeSelection = this.getNodeSelection();
if (!nodeSelection)
return;
this.lf.setProperties(nodeSelection.id, {
node_selection_ids: this.selectNodesIds,
});
(_a = this.lf
.getNodeModelById(nodeSelection.id)) === null || _a === void 0 ? void 0 : _a.updatePointsByNodes(this.selectNodesIds);
};
/**
* 获取所属的node-selection
*/
NodeSelection.prototype.getNodeSelection = function () {
var _this = this;
var ids = this.selectNodesIds;
var rawData = this.lf.getGraphRawData();
var oldIds = ids.filter(function (id) { return id !== _this.currentClickNode.id; });
return rawData.nodes.find(function (node) {
if (node.type === 'node-selection') {
var nodeSelectionIds_1 = get(node, 'properties.node_selection_ids', []);
return oldIds.every(function (id) { return nodeSelectionIds_1.includes(id); });
}
return false;
});
};
NodeSelection.prototype.onNodeChange = function (lf, model) {
var connectedSelections = lf.graphModel.nodes.filter(function (node) {
if (!isNodeSelectionModel(node)) {
return false;
}
var childIds = node.properties.node_selection_ids || [];
return childIds.includes(model.id);
});
Promise.resolve().then(function () {
connectedSelections.forEach(function (node) {
node.updatePointsByNodes(node.properties.node_selection_ids || []);
});
});
};
NodeSelection.prototype.render = function (lf) {
var _this = this;
this.lf = lf;
lf.on('node:click', function (val) {
var _a;
if (!val.e.shiftKey || val.data.type === NODE_SELECTION_TYPE)
return;
_this.currentClickNode = val.data;
// 如果selectNodesIds中已存在此节点，则取消选中此节点
var hasExists = false;
if (_this.selectNodesIds.includes(val.data.id)) {
(_a = _this.lf.getNodeModelById(val.data.id)) === null || _a === void 0 ? void 0 : _a.setSelected(false);
hasExists = true;
}
// 获取所有被选中的节点，获取到的数组是无序的
var nodes = lf.getSelectElements(true).nodes;
_this.selectNodes = nodes;
if (_this.selectNodes.length === 1) {
if (!hasExists) {
_this.addNodeSelection();
}
else {
_this.updateNodeSelection();
}
}
else if (_this.selectNodes.length > 1) {
_this.updateNodeSelection();
}
});
lf.graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
_this.onNodeChange(lf, model);
/**
* 如果移动的是分组，那么分组的子节点也跟着移动。
* 忽略来自分组resize导致的move
*/
if (isNodeSelectionModel(model) && !model.isResize) {
var nodeIds = model.properties.node_selection_ids || [];
lf.graphModel.moveNodes(nodeIds, deltaX, deltaY, true);
return true;
}
return true;
});
lf.graphModel.addNodeResizeRules(function (model) {
if (!isNodeSelectionModel(model)) {
_this.onNodeChange(lf, model);
}
return true;
});
};
NodeSelection.pluginName = 'node-selection';
return NodeSelection;
}());
var isNodeSelectionModel = function (node) {
return !!(node && node.type === NODE_SELECTION_TYPE);
};
export default NodeSelection;
export { NodeSelection };