@logicflow/extension
Version:
LogicFlow Extensions
301 lines (300 loc) • 11.6 kB
JavaScript
"use strict";
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HorizontalLaneView = exports.HorizontalLaneModel = void 0;
/**
* 泳道节点
*/
var core_1 = require("@logicflow/core");
var _1 = require(".");
var group_1 = require("../../../materials/group");
var laneMinSize = {
width: 312,
height: 72,
};
var HorizontalLaneModel = /** @class */ (function (_super) {
__extends(HorizontalLaneModel, _super);
function HorizontalLaneModel() {
return _super !== null && _super.apply(this, arguments) || this;
}
HorizontalLaneModel.prototype.initNodeData = function (data) {
_super.prototype.initNodeData.call(this, data);
this.height = 260;
// this.foldable = true
this.foldedWidth = 42;
this.resizable = true;
this.zIndex = 1;
this.text.editable = true;
this.toJSON = _1.poolToJSON;
};
HorizontalLaneModel.prototype.setAttributes = function () {
this.text = __assign(__assign({}, this.text), { value: this.text.value || '泳池示例', x: this.x - this.width / 2 + 11, y: this.y });
};
HorizontalLaneModel.prototype.getTextStyle = function () {
var style = _super.prototype.getTextStyle.call(this);
style.textWidth = 16;
return style;
};
HorizontalLaneModel.prototype.foldGroup = function (isFolded) {
var _this = this;
this.setProperty('isFolded', isFolded);
this.isFolded = isFolded;
// step 1
if (isFolded) {
this.x = this.x - this.width / 2 + this.foldedWidth / 2;
this.unfoldedWidth = this.width;
this.unfoldedHight = this.height;
this.width = this.foldedWidth;
}
else {
this.width = this.unfoldedWidth;
this.x = this.x + this.width / 2 - this.foldedWidth / 2;
}
// step 2
var allEdges = this.incoming.edges.concat(this.outgoing.edges);
this.children.forEach(function (elementId) {
var nodeModel = _this.graphModel.getElement(elementId);
nodeModel.visible = !isFolded;
allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
});
// step 3
this.foldEdge(isFolded, allEdges);
};
// 感应泳道变化，调整宽高
HorizontalLaneModel.prototype.resizePool = function (resizeId, newNodeSize) {
var _this = this;
if (!this.children.size) {
return;
}
var minX = null;
var maxX = null;
var minY = null;
var maxY = null;
var hasMaxX = false;
// 找到边界
this.children.forEach(function (elementId) {
var nodeModel = _this.graphModel.getElement(elementId);
var x = nodeModel.x, y = nodeModel.y, width = nodeModel.width, height = nodeModel.height, type = nodeModel.type, id = nodeModel.id;
if (type !== 'lane') {
return;
}
if (id === resizeId && newNodeSize) {
minX = newNodeSize.x - newNodeSize.width / 2;
maxX = newNodeSize.x + newNodeSize.width / 2;
hasMaxX = true;
}
if (!hasMaxX && (!minX || x - width / 2 < minX)) {
minX = x - width / 2;
}
if (!hasMaxX && (!maxX || x + width / 2 > maxX)) {
maxX = x + width / 2;
}
if (!minY || y - height / 2 < minY) {
minY = y - height / 2;
}
if (!maxY || y + height / 2 > maxY) {
maxY = y + height / 2;
}
});
if (minX && maxX && minY && maxY) {
this.width = maxX - minX + 30;
this.height = maxY - minY;
this.x = minX + (maxX - minX) / 2 - 15;
this.y = minY + (maxY - minY) / 2;
this.setAttributes();
this.resizeChildren({});
}
};
HorizontalLaneModel.prototype.resizeChildren = function (_a) {
var _this = this;
var _b = _a.resizeDir, resizeDir = _b === void 0 ? '' : _b, _c = _a.deltaHeight, deltaHeight = _c === void 0 ? 0 : _c;
var _d = this, x = _d.x, y = _d.y, width = _d.width;
var laneChildren = [];
this.children.forEach(function (elementId) {
var nodeModel = _this.graphModel.getElement(elementId);
var type = nodeModel.type;
if (type === 'lane') {
laneChildren.push(nodeModel);
}
});
// 按照位置排序
laneChildren.sort(function (a, b) {
if (a.y < b.y) {
return -1;
}
return 1;
});
// 把泳池resize的高度加进来
var firstLane = laneChildren[0];
var lastLane = laneChildren[laneChildren.length - 1];
switch (resizeDir) {
case 'below':
// 高度加在最下面的泳道上
lastLane.height =
lastLane.height + deltaHeight < laneMinSize.height
? laneMinSize.height
: lastLane.height + deltaHeight;
laneChildren[laneChildren.length - 1] = lastLane;
break;
case 'above':
// 高度加在最上面的泳道上
firstLane.height =
firstLane.height + deltaHeight < laneMinSize.height
? laneMinSize.height
: firstLane.height + deltaHeight;
laneChildren[0] = firstLane;
break;
default:
break;
}
var poolHeight = laneChildren.reduce(function (a, b) { return a + b.height; }, 0);
var aboveNodeHeights = 0;
laneChildren.forEach(function (nodeModel) {
var height = nodeModel.height;
nodeModel.changeAttribute({
width: width - 30,
height: height,
x: x + 15,
y: y - poolHeight / 2 + aboveNodeHeights + height / 2,
});
aboveNodeHeights += height;
});
this.height = poolHeight;
};
HorizontalLaneModel.prototype.addChild = function (childId) {
var _a;
_super.prototype.addChild.call(this, childId);
(_a = this.graphModel.group.nodeGroupMap) === null || _a === void 0 ? void 0 : _a.set(childId, this.id);
};
HorizontalLaneModel.prototype.addChildAbove = function (_a) {
var _this = this;
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
this.children.forEach(function (elementId) {
var nodeModel = _this.graphModel.getElement(elementId);
var type = nodeModel.type, childY = nodeModel.y;
if (type !== 'lane') {
return;
}
// 在被操作的泳道之上
if (childY < y) {
nodeModel.changeAttribute({ y: childY - 120 });
}
});
var laneId = this.graphModel.addNode({
type: 'lane',
properties: {
nodeSize: {
width: width,
height: 120,
},
},
x: x,
y: y - height / 2 - 60,
}).id;
this.addChild(laneId);
this.height = this.height + 120;
this.y = this.y - 60;
};
HorizontalLaneModel.prototype.addChildBelow = function (_a) {
var _this = this;
var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
this.children.forEach(function (elementId) {
var nodeModel = _this.graphModel.getElement(elementId);
var type = nodeModel.type, childY = nodeModel.y;
if (type !== 'lane') {
return;
}
// 在被操作的泳道之下
if (childY > y) {
nodeModel.changeAttribute({ y: childY + 120 });
}
});
var laneId = this.graphModel.addNode({
type: 'lane',
properties: {
nodeSize: {
width: width,
height: 120,
},
},
x: x,
y: y + height / 2 + 60,
}).id;
this.addChild(laneId);
this.height = this.height + 120;
this.y = this.y + 60;
};
HorizontalLaneModel.prototype.deleteChild = function (childId) {
var _this = this;
var laneChildren = [];
this.children.forEach(function (elementId) {
var nodeModel = _this.graphModel.getElement(elementId);
var type = nodeModel.type;
if (type === 'lane') {
laneChildren.push(nodeModel);
}
});
if (laneChildren.length <= 1) {
return;
}
this.removeChild(childId);
this.graphModel.deleteNode(childId);
this.resizePool();
};
return HorizontalLaneModel;
}(group_1.GroupNodeModel));
exports.HorizontalLaneModel = HorizontalLaneModel;
var HorizontalLaneView = /** @class */ (function (_super) {
__extends(HorizontalLaneView, _super);
function HorizontalLaneView() {
return _super !== null && _super.apply(this, arguments) || this;
}
HorizontalLaneView.prototype.getResizeShape = function () {
var model = this.props.model;
var x = model.x, y = model.y, width = model.width, height = model.height;
var style = model.getNodeStyle();
// 标题区域
var foldRectAttrs = __assign(__assign({}, style), { x: x - width / 2, y: y - height / 2, width: 30, height: height });
// 泳道区域
var transRectAttrs = __assign(__assign({}, style), { x: x - width / 2 + 30, y: y - height / 2, width: width - 30, height: height, fill: 'transparent' });
return (0, core_1.h)('g', {}, [
// this.getAddAbleShape(),
(0, core_1.h)('rect', __assign({}, foldRectAttrs)),
(0, core_1.h)('rect', __assign({}, transRectAttrs)),
this.getFoldIcon(),
]);
};
return HorizontalLaneView;
}(group_1.GroupNode));
exports.HorizontalLaneView = HorizontalLaneView;
var PoolNode = {
type: 'pool',
view: HorizontalLaneView,
model: HorizontalLaneModel,
};
exports.default = PoolNode;