kre-form
Version:
本项目由 Angular8+ 编写的表单设计器和表单应用，所有的配置都是 JSON 结构体组成,PC 端是基于 ANT 组件库封装
707 lines (696 loc) • 30 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@antv/x6'), require('ng-zorro-antd/message'), require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('@kre-form/abc/src/lib/data-flow', ['exports', '@antv/x6', 'ng-zorro-antd/message', '@angular/core', '@angular/common'], factory) :
(factory((global['kre-form'] = global['kre-form'] || {}, global['kre-form'].abc = global['kre-form'].abc || {}, global['kre-form'].abc.src = global['kre-form'].abc.src || {}, global['kre-form'].abc.src.lib = global['kre-form'].abc.src.lib || {}, global['kre-form'].abc.src.lib['data-flow'] = {}),global.x6,global.message,global.ng.core,global.ng.common));
}(this, (function (exports,x6,message,core,common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function () {
__assign = Object.assign || function __assign(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);
};
function __read(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;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DataFlowComponent = /** @class */ (function () {
function DataFlowComponent(message$$1) {
this.message = message$$1;
this.drawerEvent = new core.EventEmitter();
this.modalEvent = new core.EventEmitter();
this.data = {
// 节点
nodes: [
{
id: "node1",
// String，可选，节点的唯一标识
x: 40,
// Number，必选，节点位置的 x 值
y: 40,
// Number，必选，节点位置的 y 值
width: 80,
// Number，可选，节点大小的 width 值
height: 40,
// Number，可选，节点大小的 height 值
label: "hello",
},
{
id: "node2",
// String，节点的唯一标识
x: 160,
// Number，必选，节点位置的 x 值
y: 180,
// Number，必选，节点位置的 y 值
width: 80,
// Number，可选，节点大小的 width 值
height: 40,
// Number，可选，节点大小的 height 值
label: "world",
},
],
// 边
edges: [
{
source: "node1",
// String，必须，起始节点 id
target: "node2",
},
],
};
this.title = "my-app";
}
/**
* @return {?}
*/
DataFlowComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.graphShape();
this.grahpInit();
this.getHistoryGrahp();
this.graphEvent();
// console.log("节点", this.graph.getNodes());
// console.log("cell-----");
// console.log("节点和边", this.graph.getCells());
// console.log("根节点，即没有输入边的节点", this.graph.getRootNodes());
// console.log("叶子节点，即没有输出边的节点", this.graph.getLeafNodes());
// console.log("数量", this.graph.getCellCount());
// console.log(this.graph);
// console.log(this.stencil.graphs.group1.getNodes());
/** @type {?} */
var nodes = this.graph.getLeafNodes();
for (var i = 0; i < nodes.length; i++) {
/** @type {?} */
var node = nodes[i];
if (node["label"] !== "输出") {
this.message.error("界面必须包含输出");
break;
}
}
};
/**
* @return {?}
*/
DataFlowComponent.prototype.grahpInit = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var that = this;
// #region 初始化画布
this.graph = new x6.Graph({
container: ( /** @type {?} */(document.getElementById("graph-container"))),
grid: true,
history: true,
minimap: {
enabled: true,
container: ( /** @type {?} */(document.getElementById("minimap"))),
width: 198,
height: 198,
padding: 10,
},
mousewheel: {
enabled: true,
zoomAtMousePosition: true,
modifiers: "ctrl",
minScale: 0.5,
maxScale: 3,
},
connecting: {
router: "manhattan",
connector: {
name: "rounded",
args: {
radius: 8,
},
},
anchor: "center",
connectionPoint: "anchor",
allowBlank: false,
snap: {
radius: 20,
},
createEdge: /**
* @return {?}
*/ function () {
return new x6.Shape.Edge({
attrs: {
line: {
stroke: "#A2B1C3",
strokeWidth: 2,
targetMarker: {
name: "block",
width: 12,
height: 8,
},
},
},
zIndex: 0,
});
},
// 在移动边的时候判断连接是否有效
validateConnection:
// 在移动边的时候判断连接是否有效
/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var sourceView = _a.sourceView, targetView = _a.targetView, sourceMagnet = _a.sourceMagnet, targetMagnet = _a.targetMagnet, sourceCell = _a.sourceCell, targetCell = _a.targetCell;
if (targetMagnet && targetCell) {
/** @type {?} */
var incomingEdges = ( /** @type {?} */(that.graph)).getIncomingEdges(targetCell) || [];
if (incomingEdges.length >= ( /** @type {?} */(targetView)).cell.getData().out) {
that.message.error("超出out数量");
return false;
}
}
// 不允许连接到自己
if (sourceView === targetView) {
// that.message.error("不允许连接到自己");
return false;
}
// 只能从输出链接桩创建连接
if (!sourceMagnet ||
sourceMagnet.getAttribute("port-group") === "left") {
// that.message.error("只能从输出链接桩创建连接");
return false;
}
// 只能连接到输入链接桩
if (!targetMagnet ||
targetMagnet.getAttribute("port-group") === "right") {
// that.message.error("只能连接到输入链接桩");
return false;
}
return !!targetMagnet;
},
},
highlighting: {
magnetAdsorbed: {
name: "stroke",
args: {
attrs: {
fill: "#5F95FF",
stroke: "#5F95FF",
},
},
},
},
resizing: true,
rotating: true,
selecting: {
enabled: true,
rubberband: true,
showNodeSelectionBox: true,
},
snapline: true,
keyboard: true,
clipboard: true,
});
this.stencil = new x6.Addon.Stencil({
target: this.graph,
stencilGraphWidth: 200,
stencilGraphHeight: 180,
collapsable: true,
groups: [
{
title: "数据处理",
name: "group1",
},
{
title: "输入输出",
name: "group2",
},
],
layoutOptions: {
columns: 2,
columnWidth: 80,
rowHeight: 55,
},
validateNode: /**
* @param {?} currentnode
* @return {?}
*/ function (currentnode) {
/** @type {?} */
var nodes = that.graph.getNodes();
if (nodes.length > 0) {
for (var i = 0; i < nodes.length; i++) {
/** @type {?} */
var node = nodes[i];
if (currentnode["label"] === "输出" && node["label"] === "输出") {
return false;
}
}
}
return true;
},
getDropNode: /**
* @param {?} node
* @return {?}
*/ function (node) {
/** @type {?} */
var size = node.size();
if (node["label"] === "输入") {
that.getModal(node["label"]);
}
if (node["label"] === "输出") {
r2.attr("body/fill", "#ccc");
}
return node.clone().size(size.width * 1.1, size.height * 1.1);
},
});
( /** @type {?} */(document.getElementById("stencil"))).appendChild(this.stencil.container);
// #region 初始化图形
// 常规左右两个桩
/** @type {?} */
var ports = {
groups: {
right: {
position: "right",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#5F95FF",
strokeWidth: 1,
fill: "#fff",
style: {
visibility: "hidden",
},
},
},
},
left: {
position: "left",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#5F95FF",
strokeWidth: 1,
fill: "#fff",
style: {
visibility: "hidden",
},
},
},
},
},
items: [
{
id: "port1",
group: "left",
},
{
id: "port2",
group: "right",
},
],
};
// 输入只有左侧一个桩
/** @type {?} */
var ports2 = {
groups: {
left: {
position: "left",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#5F95FF",
strokeWidth: 1,
fill: "#fff",
style: {
visibility: "hidden",
},
},
},
},
},
items: [
{
id: "port1",
group: "left",
},
],
};
// 输出只有右侧一个桩
/** @type {?} */
var ports3 = {
groups: {
right: {
position: "right",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#5F95FF",
strokeWidth: 1,
fill: "#fff",
style: {
visibility: "hidden",
},
},
},
},
},
items: [
{
id: "port2",
group: "right",
},
],
};
/** @type {?} */
var r1 = this.graph.createNode({
shape: "custom-rect",
id: "in",
label: "输入",
ports: __assign({}, ports3),
data: {
in: 0,
out: 3,
},
});
/** @type {?} */
var r2 = this.graph.createNode({
shape: "custom-rect",
id: "out",
label: "输出",
ports: __assign({}, ports2),
data: {
in: 2,
out: 2,
},
});
/** @type {?} */
var nodeArr = [];
this.menuList.forEach(( /**
* @param {?} element
* @param {?} i
* @return {?}
*/function (element, i) {
nodeArr.push(_this.graph.createNode({
shape: "custom-rect",
label: element.title,
ports: __assign({}, ports),
data: element.data,
}));
}));
this.stencil.load([r1, r2], "group1");
this.stencil.load(__spread(nodeArr), "group2");
};
/**
* @return {?}
*/
DataFlowComponent.prototype.graphEvent = /**
* @return {?}
*/
function () {
var _this = this;
// delete
this.graph.bindKey("backspace", ( /**
* @return {?}
*/function () {
/** @type {?} */
var cells = _this.graph.getSelectedCells();
if (cells.length) {
_this.graph.removeCells(cells);
}
}));
// 控制连接桩显示/隐藏
/** @type {?} */
var showPorts = ( /**
* @param {?} ports
* @param {?} show
* @return {?}
*/function (ports, show) {
for (var i = 0, len = ports.length; i < len; i = i + 1) {
ports[i].style.visibility = show ? "visible" : "hidden";
}
});
this.graph.on("node:mouseenter", ( /**
* @return {?}
*/function () {
/** @type {?} */
var container = ( /** @type {?} */(document.getElementById("graph-container")));
/** @type {?} */
var ports = ( /** @type {?} */(container.querySelectorAll(".x6-port-body")));
showPorts(ports, true);
}));
this.graph.on("node:mouseleave", ( /**
* @return {?}
*/function () {
/** @type {?} */
var container = ( /** @type {?} */(document.getElementById("graph-container")));
/** @type {?} */
var ports = ( /** @type {?} */(container.querySelectorAll(".x6-port-body")));
showPorts(ports, false);
}));
// this.graph.on(
// "edge:connected",
// ({ isNew, currentMagnet, currentCell }) => {}
// );
// this.graph.on("edge:added", ({ cell, index, options }) => {});
// this.graph.on(
// "edge:change:*",
// (args: {
// key: string; // 通过 key 来确定改变项
// current: any; // 当前值，类型根据 key 指代的类型确定
// previous: any; // 改变之前的值，类型根据 key 指代的类型确定
// options: any; // 透传的 options
// }) => {
// console.log("key:", args.key);
// }
// );
// this.graph.on("edge:changed", ({ edge, options }) => {});
this.graph.on("node:click", ( /**
* @param {?} __0
* @return {?}
*/function (_a) {
var cell = _a.cell, view = _a.view;
/** @type {?} */
var node = view.cell;
console.log(node.label);
if (node.label === "输入") {
_this.getModal(node.label);
}
else {
_this.getDrawer(node.label);
}
}));
};
/**
* @return {?}
*/
DataFlowComponent.prototype.getHistoryGrahp = /**
* @return {?}
*/
function () {
/** @type {?} */
var json = localStorage.getItem("graphJSON");
if (json) {
this.graph.fromJSON(JSON.parse(json));
}
};
/**
* @param {?} label
* @return {?}
*/
DataFlowComponent.prototype.getModal = /**
* @param {?} label
* @return {?}
*/
function (label) {
this.modalEvent.emit(label);
};
/**
* @param {?} label
* @return {?}
*/
DataFlowComponent.prototype.getDrawer = /**
* @param {?} label
* @return {?}
*/
function (label) {
this.drawerEvent.emit(label);
};
/**
* @return {?}
*/
DataFlowComponent.prototype.graphShape = /**
* @return {?}
*/
function () {
x6.Graph.registerNode("custom-rect", {
inherit: "rect",
width: 66,
height: 30,
attrs: {
body: {
strokeWidth: 1,
stroke: "#eee",
fill: "#fff",
},
text: {
fontSize: 12,
color: "#262626",
},
},
}, true);
};
/**
* @return {?}
*/
DataFlowComponent.prototype.handleZoomIn = /**
* @return {?}
*/
function () {
this.graph.zoom(0.1);
console.log(this.graph.zoom());
};
/**
* @return {?}
*/
DataFlowComponent.prototype.handleZoomOut = /**
* @return {?}
*/
function () {
this.graph.zoom(-0.1);
};
/**
* @return {?}
*/
DataFlowComponent.prototype.handleUndo = /**
* @return {?}
*/
function () {
this.graph.history.undo();
};
/**
* @return {?}
*/
DataFlowComponent.prototype.handleRedo = /**
* @return {?}
*/
function () {
this.graph.history.redo();
};
/**
* @return {?}
*/
DataFlowComponent.prototype.handleReal = /**
* @return {?}
*/
function () {
this.graph.scale(1);
this.graph.centerContent();
};
/**
* @return {?}
*/
DataFlowComponent.prototype.handleFit = /**
* @return {?}
*/
function () {
this.graph.zoomToFit({ padding: 12 });
};
DataFlowComponent.decorators = [
{ type: core.Component, args: [{
selector: "data-flow",
template: "<div class=\"wrap\">\n <div class=\"main\">\n <div class=\"edit-container\">\n <div id=\"container\">\n <div id=\"stencil\"></div>\n <div class=\"graph-wrap\">\n <div class=\"toolbar-wrap\">\n <span (click)=\"handleZoomIn()\" class=\"toolbar-btn\">+</span>\n <span class=\"number\">{{ graph.zoom() | percent }}</span>\n <span (click)=\"handleZoomOut()\" class=\"toolbar-btn\">-</span>\n <span class=\"line\">|</span>\n <span\n (click)=\"handleUndo()\"\n [ngClass]=\"{ on: graph.history.canUndo() }\"\n class=\"toolbar-btn-off\"\n ><</span\n >\n <span\n (click)=\"handleRedo()\"\n [ngClass]=\"{ on: graph.history.canRedo() }\"\n class=\"toolbar-btn-off\"\n >></span\n >\n\n <span (click)=\"handleReal()\">\u5B9E\u9645\u5C3A\u5BF8</span>\n <span (click)=\"handleFit()\">\u9002\u5E94\u753B\u5E03</span>\n </div>\n <div id=\"graph-container\"></div>\n <div id=\"minimap\"></div>\n </div>\n </div>\n </div>\n <div class=\"board\"></div>\n </div>\n</div>\n",
styles: [":host #stencil{width:180px;height:100%;position:relative}:host .graph-wrap{width:calc(100% - 180px)}:host .graph-wrap .toolbar-wrap{height:42px;line-height:42px}:host .graph-wrap .toolbar-wrap span{color:#111;margin:0 10px}:host .graph-wrap .toolbar-wrap .number{display:inline-block;width:42px}:host .graph-wrap .toolbar-wrap .line{color:#eee}:host .graph-wrap .toolbar-wrap .toolbar-btn{cursor:pointer;font-weight:700;padding:0 10px}:host .graph-wrap .toolbar-wrap .toolbar-btn-off{font-weight:700;padding:0 10px;cursor:default;color:#eee}:host .graph-wrap .toolbar-wrap .on{cursor:pointer;color:#111}:host .graph-wrap #graph-container{width:100%;height:100%}:host .graph-wrap #minimap{position:absolute;right:1rem;top:1rem;background-color:#bc8f8f}:host #container{display:flex;height:500px}:host ::ng-deep .x6-widget-stencil-title{display:none}:host ::ng-deep .x6-widget-stencil.collapsable>.x6-widget-stencil-content{top:0}"]
}] }
];
/** @nocollapse */
DataFlowComponent.ctorParameters = function () {
return [
{ type: message.NzMessageService }
];
};
DataFlowComponent.propDecorators = {
menuList: [{ type: core.Input }],
drawerEvent: [{ type: core.Output }],
modalEvent: [{ type: core.Output }]
};
return DataFlowComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DataFlowModule = /** @class */ (function () {
function DataFlowModule() {
}
DataFlowModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [DataFlowComponent],
imports: [common.CommonModule],
exports: [DataFlowComponent],
entryComponents: [DataFlowComponent],
},] }
];
return DataFlowModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
exports.DataFlowComponent = DataFlowComponent;
exports.DataFlowModule = DataFlowModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=kre-form-abc-src-lib-data-flow.umd.js.map