@teamias/rex-design 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/flow/core/{CustomNode.js → custom-node.js} +346 -131
- package/dist/components/flow/core/index.d.ts +1 -1
- package/dist/components/flow/core/index.js +16 -12
- package/dist/components/flow/core/util.d.ts +2 -7
- package/dist/components/flow/core/util.js +12 -5
- package/dist/components/flow/demo/menu-demo.js +324 -0
- package/dist/components/flow/demo/toolbar-demo.d.ts +2 -0
- package/dist/components/flow/demo/{Demo.js → toolbar-demo.js} +96 -69
- package/dist/components/flow/style.d.ts +1 -1
- package/dist/components/flow/style.js +4 -4
- package/dist/components/flow/types.d.ts +30 -15
- package/package.json +1 -1
- /package/dist/components/flow/core/{CustomNode.d.ts → custom-node.d.ts} +0 -0
- /package/dist/components/flow/demo/{Demo.d.ts → menu-demo.d.ts} +0 -0
|
@@ -1,103 +1,119 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
function
|
|
2
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
3
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
5
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
6
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
7
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
3
8
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
9
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
10
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
11
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
12
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
13
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
8
14
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
9
15
|
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
10
|
-
import {
|
|
16
|
+
import { PlusOutlined } from '@ant-design/icons';
|
|
11
17
|
import { Handle, NodeToolbar, Position, useReactFlow } from '@xyflow/react';
|
|
12
|
-
import { Button,
|
|
18
|
+
import { Button, Dropdown } from 'antd';
|
|
13
19
|
import { sleep } from 'radash';
|
|
14
|
-
import {
|
|
20
|
+
import { NodeButtonDiv } from "../style";
|
|
21
|
+
import { autoLayoutTree, createEdge, createNode, toComponentData } from "./util";
|
|
15
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
23
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
24
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
25
|
export var CustomNode = function CustomNode(props) {
|
|
19
|
-
var _data$data;
|
|
20
26
|
var data = props.data,
|
|
21
27
|
id = props.id,
|
|
28
|
+
layoutOptions = props.layoutOptions,
|
|
29
|
+
menuItems = props.menuItems,
|
|
22
30
|
itemRender = props.itemRender,
|
|
23
31
|
toolbarRender = props.toolbarRender,
|
|
24
|
-
|
|
25
|
-
actionChange = props.actionChange,
|
|
26
|
-
onAddItem = props.onAddItem,
|
|
27
|
-
onDelItem = props.onDelItem,
|
|
28
|
-
onEditItem = props.onEditItem;
|
|
32
|
+
actionChange = props.actionChange;
|
|
29
33
|
var reactFlowInstance = useReactFlow();
|
|
30
|
-
var
|
|
34
|
+
var resetLayout = /*#__PURE__*/function () {
|
|
31
35
|
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
32
|
-
var
|
|
36
|
+
var nodes, edges;
|
|
33
37
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
34
38
|
while (1) switch (_context.prev = _context.next) {
|
|
39
|
+
case 0:
|
|
40
|
+
_context.next = 2;
|
|
41
|
+
return sleep(0);
|
|
42
|
+
case 2:
|
|
43
|
+
nodes = reactFlowInstance.getNodes();
|
|
44
|
+
edges = reactFlowInstance.getEdges();
|
|
45
|
+
reactFlowInstance.setNodes(autoLayoutTree(nodes, edges, layoutOptions));
|
|
46
|
+
case 5:
|
|
47
|
+
case "end":
|
|
48
|
+
return _context.stop();
|
|
49
|
+
}
|
|
50
|
+
}, _callee);
|
|
51
|
+
}));
|
|
52
|
+
return function resetLayout() {
|
|
53
|
+
return _ref.apply(this, arguments);
|
|
54
|
+
};
|
|
55
|
+
}();
|
|
56
|
+
var addItem = /*#__PURE__*/function () {
|
|
57
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(newNodeData) {
|
|
58
|
+
var node, _node$data$childIds, newNode, newEdge;
|
|
59
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
60
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
35
61
|
case 0:
|
|
36
62
|
node = reactFlowInstance.getNode(id);
|
|
37
63
|
if (node) {
|
|
38
|
-
|
|
64
|
+
_context2.next = 3;
|
|
39
65
|
break;
|
|
40
66
|
}
|
|
41
|
-
return
|
|
67
|
+
return _context2.abrupt("return");
|
|
42
68
|
case 3:
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
childIds: [],
|
|
52
|
-
data: {
|
|
53
|
-
label: '新节点'
|
|
54
|
-
}
|
|
55
|
-
}, layoutOptions);
|
|
69
|
+
_context2.prev = 3;
|
|
70
|
+
// {
|
|
71
|
+
// id: `new-${Date.now()}`,
|
|
72
|
+
// parentIds: [node.id],
|
|
73
|
+
// childIds: [],
|
|
74
|
+
// data: { label: '新节点' },
|
|
75
|
+
// }
|
|
76
|
+
newNode = createNode(newNodeData, layoutOptions);
|
|
56
77
|
newEdge = createEdge(node.id, newNode.id);
|
|
57
78
|
(_node$data$childIds = node.data.childIds) === null || _node$data$childIds === void 0 || _node$data$childIds.push(newNode.id);
|
|
58
79
|
reactFlowInstance.updateNodeData(node.id, _objectSpread({}, node.data));
|
|
59
80
|
reactFlowInstance.addNodes(newNode);
|
|
60
81
|
reactFlowInstance.addEdges(newEdge);
|
|
61
|
-
|
|
62
|
-
return
|
|
63
|
-
case
|
|
64
|
-
nodes = reactFlowInstance.getNodes();
|
|
65
|
-
edges = reactFlowInstance.getEdges();
|
|
66
|
-
reactFlowInstance.setNodes(autoLayoutTree(nodes, edges, layoutOptions));
|
|
82
|
+
_context2.next = 12;
|
|
83
|
+
return resetLayout();
|
|
84
|
+
case 12:
|
|
67
85
|
actionChange === null || actionChange === void 0 || actionChange();
|
|
68
|
-
|
|
86
|
+
_context2.next = 18;
|
|
69
87
|
break;
|
|
70
|
-
case
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
console.error('[CustomNode-addItem]',
|
|
74
|
-
case
|
|
88
|
+
case 15:
|
|
89
|
+
_context2.prev = 15;
|
|
90
|
+
_context2.t0 = _context2["catch"](3);
|
|
91
|
+
console.error('[CustomNode-addItem]', _context2.t0);
|
|
92
|
+
case 18:
|
|
75
93
|
case "end":
|
|
76
|
-
return
|
|
94
|
+
return _context2.stop();
|
|
77
95
|
}
|
|
78
|
-
},
|
|
96
|
+
}, _callee2, null, [[3, 15]]);
|
|
79
97
|
}));
|
|
80
|
-
return function addItem() {
|
|
81
|
-
return
|
|
98
|
+
return function addItem(_x) {
|
|
99
|
+
return _ref2.apply(this, arguments);
|
|
82
100
|
};
|
|
83
101
|
}();
|
|
84
|
-
var
|
|
85
|
-
var
|
|
86
|
-
var node, delIdsSet, eachFn
|
|
87
|
-
return _regeneratorRuntime().wrap(function
|
|
88
|
-
while (1) switch (
|
|
102
|
+
var delItemDeep = /*#__PURE__*/function () {
|
|
103
|
+
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
|
|
104
|
+
var node, delIdsSet, eachFn;
|
|
105
|
+
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
|
106
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
89
107
|
case 0:
|
|
90
108
|
node = reactFlowInstance.getNode(id);
|
|
91
109
|
if (node) {
|
|
92
|
-
|
|
110
|
+
_context3.next = 3;
|
|
93
111
|
break;
|
|
94
112
|
}
|
|
95
|
-
return
|
|
113
|
+
return _context3.abrupt("return");
|
|
96
114
|
case 3:
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
return onDelItem === null || onDelItem === void 0 ? void 0 : onDelItem(node.data);
|
|
100
|
-
case 6:
|
|
115
|
+
_context3.prev = 3;
|
|
116
|
+
// await onDelItem?.(node.data);
|
|
101
117
|
delIdsSet = new Set([node.id]);
|
|
102
118
|
/**
|
|
103
119
|
* 递归删除节点及其子树
|
|
@@ -153,117 +169,316 @@ export var CustomNode = function CustomNode(props) {
|
|
|
153
169
|
};
|
|
154
170
|
})
|
|
155
171
|
});
|
|
156
|
-
|
|
157
|
-
return
|
|
172
|
+
_context3.next = 10;
|
|
173
|
+
return resetLayout();
|
|
174
|
+
case 10:
|
|
175
|
+
actionChange === null || actionChange === void 0 || actionChange();
|
|
176
|
+
_context3.next = 16;
|
|
177
|
+
break;
|
|
178
|
+
case 13:
|
|
179
|
+
_context3.prev = 13;
|
|
180
|
+
_context3.t0 = _context3["catch"](3);
|
|
181
|
+
console.error('[CustomNode-delItemDeep]', _context3.t0);
|
|
182
|
+
case 16:
|
|
183
|
+
case "end":
|
|
184
|
+
return _context3.stop();
|
|
185
|
+
}
|
|
186
|
+
}, _callee3, null, [[3, 13]]);
|
|
187
|
+
}));
|
|
188
|
+
return function delItemDeep() {
|
|
189
|
+
return _ref3.apply(this, arguments);
|
|
190
|
+
};
|
|
191
|
+
}();
|
|
192
|
+
var delItem = /*#__PURE__*/function () {
|
|
193
|
+
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
|
|
194
|
+
var node, _reactFlowInstance$ge, _reactFlowInstance$ge2, parentIds, childIds, eachData, _toComponentData, nodes, edges;
|
|
195
|
+
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
|
|
196
|
+
while (1) switch (_context4.prev = _context4.next) {
|
|
197
|
+
case 0:
|
|
198
|
+
node = reactFlowInstance.getNode(id);
|
|
199
|
+
if (node) {
|
|
200
|
+
_context4.next = 3;
|
|
201
|
+
break;
|
|
202
|
+
}
|
|
203
|
+
return _context4.abrupt("return");
|
|
204
|
+
case 3:
|
|
205
|
+
_context4.prev = 3;
|
|
206
|
+
parentIds = node.data.parentIds || [];
|
|
207
|
+
childIds = node.data.childIds || []; // 多对多的情况下,需要深度删除
|
|
208
|
+
if (!(parentIds.length > 1 && childIds.length > 1)) {
|
|
209
|
+
_context4.next = 9;
|
|
210
|
+
break;
|
|
211
|
+
}
|
|
212
|
+
delItemDeep();
|
|
213
|
+
return _context4.abrupt("return");
|
|
214
|
+
case 9:
|
|
215
|
+
if (!((((_reactFlowInstance$ge = reactFlowInstance.getNode(parentIds[0])) === null || _reactFlowInstance$ge === void 0 || (_reactFlowInstance$ge = _reactFlowInstance$ge.data) === null || _reactFlowInstance$ge === void 0 || (_reactFlowInstance$ge = _reactFlowInstance$ge.childIds) === null || _reactFlowInstance$ge === void 0 ? void 0 : _reactFlowInstance$ge.length) || 0) > 1 && (((_reactFlowInstance$ge2 = reactFlowInstance.getNode(childIds[0])) === null || _reactFlowInstance$ge2 === void 0 || (_reactFlowInstance$ge2 = _reactFlowInstance$ge2.data) === null || _reactFlowInstance$ge2 === void 0 || (_reactFlowInstance$ge2 = _reactFlowInstance$ge2.parentIds) === null || _reactFlowInstance$ge2 === void 0 ? void 0 : _reactFlowInstance$ge2.length) || 0) > 1)) {
|
|
216
|
+
_context4.next = 12;
|
|
217
|
+
break;
|
|
218
|
+
}
|
|
219
|
+
delItemDeep();
|
|
220
|
+
return _context4.abrupt("return");
|
|
158
221
|
case 12:
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
222
|
+
// 1. 更新父节点的 childIds 引用：移除当前节点,并添加子节点
|
|
223
|
+
parentIds.forEach(function (parentId) {
|
|
224
|
+
var _parentNode$data$chil2;
|
|
225
|
+
var parentNode = reactFlowInstance.getNode(parentId);
|
|
226
|
+
if (!parentNode) return;
|
|
227
|
+
parentNode.data.childIds = parentNode.data.childIds || [];
|
|
228
|
+
(_parentNode$data$chil2 = parentNode.data.childIds).push.apply(_parentNode$data$chil2, _toConsumableArray(childIds));
|
|
229
|
+
// 需要确认父节点只有一个子节点，才添加
|
|
230
|
+
// if (parentNode.data.childIds.length === 1) {
|
|
231
|
+
// parentNode.data.childIds.push(...childIds);
|
|
232
|
+
// }
|
|
233
|
+
|
|
234
|
+
// 移除当前节点，添加子节点
|
|
235
|
+
parentNode.data.childIds = parentNode.data.childIds.filter(function (cid) {
|
|
236
|
+
return cid !== node.id;
|
|
237
|
+
});
|
|
238
|
+
reactFlowInstance.updateNodeData(parentId, _objectSpread({}, parentNode.data));
|
|
239
|
+
});
|
|
240
|
+
|
|
241
|
+
// 2. 更新子节点的 parentIds 引用：移除当前节点,并添加父节点
|
|
242
|
+
childIds.forEach(function (childId) {
|
|
243
|
+
var _childNode$data$paren;
|
|
244
|
+
var childNode = reactFlowInstance.getNode(childId);
|
|
245
|
+
if (!childNode) return;
|
|
246
|
+
childNode.data.parentIds = childNode.data.parentIds || [];
|
|
247
|
+
(_childNode$data$paren = childNode.data.parentIds).push.apply(_childNode$data$paren, _toConsumableArray(parentIds));
|
|
248
|
+
// 需要确认子节点只有一个父节点，才添加
|
|
249
|
+
// if (childNode.data.parentIds.length === 1) {
|
|
250
|
+
// childNode.data.parentIds.push(...parentIds);
|
|
251
|
+
// }
|
|
252
|
+
|
|
253
|
+
// 移除当前节点
|
|
254
|
+
childNode.data.parentIds = childNode.data.parentIds.filter(function (pid) {
|
|
255
|
+
return pid !== node.id;
|
|
256
|
+
});
|
|
257
|
+
reactFlowInstance.updateNodeData(childId, _objectSpread({}, childNode.data));
|
|
258
|
+
});
|
|
259
|
+
|
|
260
|
+
// 3. 删除节点及其关联边
|
|
261
|
+
reactFlowInstance.deleteElements({
|
|
262
|
+
nodes: [{
|
|
263
|
+
id: node.id
|
|
264
|
+
}]
|
|
265
|
+
});
|
|
266
|
+
|
|
267
|
+
// 4. 重新建立父子节点间的连接边
|
|
268
|
+
_context4.next = 17;
|
|
269
|
+
return sleep(0);
|
|
270
|
+
case 17:
|
|
271
|
+
eachData = reactFlowInstance.getNodes().map(function (n) {
|
|
272
|
+
return n.data;
|
|
273
|
+
});
|
|
274
|
+
_toComponentData = toComponentData(eachData, layoutOptions), nodes = _toComponentData.nodes, edges = _toComponentData.edges;
|
|
275
|
+
reactFlowInstance.setNodes(nodes);
|
|
276
|
+
reactFlowInstance.setEdges(edges);
|
|
277
|
+
_context4.next = 23;
|
|
278
|
+
return sleep(0);
|
|
279
|
+
case 23:
|
|
162
280
|
actionChange === null || actionChange === void 0 || actionChange();
|
|
163
|
-
|
|
281
|
+
_context4.next = 29;
|
|
164
282
|
break;
|
|
165
|
-
case
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
console.error('[CustomNode-delItem]',
|
|
169
|
-
case
|
|
283
|
+
case 26:
|
|
284
|
+
_context4.prev = 26;
|
|
285
|
+
_context4.t0 = _context4["catch"](3);
|
|
286
|
+
console.error('[CustomNode-delItem]', _context4.t0);
|
|
287
|
+
case 29:
|
|
170
288
|
case "end":
|
|
171
|
-
return
|
|
289
|
+
return _context4.stop();
|
|
172
290
|
}
|
|
173
|
-
},
|
|
291
|
+
}, _callee4, null, [[3, 26]]);
|
|
174
292
|
}));
|
|
175
293
|
return function delItem() {
|
|
176
|
-
return
|
|
294
|
+
return _ref4.apply(this, arguments);
|
|
177
295
|
};
|
|
178
296
|
}();
|
|
179
297
|
var editItem = /*#__PURE__*/function () {
|
|
180
|
-
var
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
while (1) switch (_context3.prev = _context3.next) {
|
|
298
|
+
var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(lastData) {
|
|
299
|
+
return _regeneratorRuntime().wrap(function _callee5$(_context5) {
|
|
300
|
+
while (1) switch (_context5.prev = _context5.next) {
|
|
184
301
|
case 0:
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
302
|
+
try {
|
|
303
|
+
// const lastData = await onEditItem?.(node.data);
|
|
304
|
+
reactFlowInstance.updateNodeData(id, _objectSpread({}, lastData));
|
|
305
|
+
actionChange === null || actionChange === void 0 || actionChange();
|
|
306
|
+
} catch (error) {
|
|
307
|
+
console.error('[CustomNode-editItem]', error);
|
|
308
|
+
}
|
|
309
|
+
case 1:
|
|
310
|
+
case "end":
|
|
311
|
+
return _context5.stop();
|
|
312
|
+
}
|
|
313
|
+
}, _callee5);
|
|
314
|
+
}));
|
|
315
|
+
return function editItem(_x2) {
|
|
316
|
+
return _ref5.apply(this, arguments);
|
|
317
|
+
};
|
|
318
|
+
}();
|
|
319
|
+
var insertItem = /*#__PURE__*/function () {
|
|
320
|
+
var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(newNodeData) {
|
|
321
|
+
var currentNode, originalChildIds, newNode, edgesToDelete, newEdges;
|
|
322
|
+
return _regeneratorRuntime().wrap(function _callee6$(_context6) {
|
|
323
|
+
while (1) switch (_context6.prev = _context6.next) {
|
|
324
|
+
case 0:
|
|
325
|
+
currentNode = reactFlowInstance.getNode(id);
|
|
326
|
+
if (currentNode) {
|
|
327
|
+
_context6.next = 3;
|
|
188
328
|
break;
|
|
189
329
|
}
|
|
190
|
-
return
|
|
330
|
+
return _context6.abrupt("return");
|
|
191
331
|
case 3:
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
332
|
+
_context6.prev = 3;
|
|
333
|
+
// 1. 保存当前节点的子节点 IDs
|
|
334
|
+
originalChildIds = currentNode.data.childIds || [];
|
|
335
|
+
if (!(originalChildIds.length === 0)) {
|
|
336
|
+
_context6.next = 7;
|
|
337
|
+
break;
|
|
338
|
+
}
|
|
339
|
+
return _context6.abrupt("return", addItem(newNodeData));
|
|
340
|
+
case 7:
|
|
341
|
+
// 2. 创建新节点，继承当前节点的子节点
|
|
342
|
+
newNode = createNode(_objectSpread(_objectSpread({}, newNodeData), {}, {
|
|
343
|
+
parentIds: [currentNode.id],
|
|
344
|
+
childIds: _toConsumableArray(originalChildIds)
|
|
345
|
+
}), layoutOptions); // 3. 更新当前节点，将 childIds 重置为只有新节点
|
|
346
|
+
currentNode.data.childIds = [newNode.id];
|
|
347
|
+
reactFlowInstance.updateNodeData(currentNode.id, _objectSpread({}, currentNode.data));
|
|
348
|
+
|
|
349
|
+
// 4. 遍历原子节点，更新它们的父节点引用
|
|
350
|
+
originalChildIds.forEach(function (childId) {
|
|
351
|
+
var _childNode$data$paren2;
|
|
352
|
+
var childNode = reactFlowInstance.getNode(childId);
|
|
353
|
+
if (!childNode) return;
|
|
354
|
+
|
|
355
|
+
// 将父节点从 currentNode.id 改为 newNode.id
|
|
356
|
+
childNode.data.parentIds = (_childNode$data$paren2 = childNode.data.parentIds) === null || _childNode$data$paren2 === void 0 ? void 0 : _childNode$data$paren2.map(function (pid) {
|
|
357
|
+
return pid === currentNode.id ? newNode.id : pid;
|
|
358
|
+
});
|
|
359
|
+
reactFlowInstance.updateNodeData(childId, _objectSpread({}, childNode.data));
|
|
360
|
+
});
|
|
361
|
+
|
|
362
|
+
// 5. 删除当前节点到原子节点的旧边
|
|
363
|
+
edgesToDelete = originalChildIds.map(function (childId) {
|
|
364
|
+
return {
|
|
365
|
+
id: "".concat(currentNode.id, "-").concat(childId)
|
|
366
|
+
};
|
|
367
|
+
});
|
|
368
|
+
reactFlowInstance.deleteElements({
|
|
369
|
+
edges: edgesToDelete
|
|
370
|
+
});
|
|
371
|
+
|
|
372
|
+
// 6. 创建新边
|
|
373
|
+
newEdges = [createEdge(currentNode.id, newNode.id)].concat(_toConsumableArray(originalChildIds.map(function (childId) {
|
|
374
|
+
return createEdge(newNode.id, childId);
|
|
375
|
+
})));
|
|
376
|
+
reactFlowInstance.addNodes(newNode);
|
|
377
|
+
reactFlowInstance.addEdges(newEdges);
|
|
378
|
+
_context6.next = 18;
|
|
379
|
+
return resetLayout();
|
|
380
|
+
case 18:
|
|
198
381
|
actionChange === null || actionChange === void 0 || actionChange();
|
|
199
|
-
|
|
382
|
+
_context6.next = 24;
|
|
200
383
|
break;
|
|
201
|
-
case
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
console.error('[CustomNode-
|
|
205
|
-
case
|
|
384
|
+
case 21:
|
|
385
|
+
_context6.prev = 21;
|
|
386
|
+
_context6.t0 = _context6["catch"](3);
|
|
387
|
+
console.error('[CustomNode-insertItem]', _context6.t0);
|
|
388
|
+
case 24:
|
|
206
389
|
case "end":
|
|
207
|
-
return
|
|
390
|
+
return _context6.stop();
|
|
208
391
|
}
|
|
209
|
-
},
|
|
392
|
+
}, _callee6, null, [[3, 21]]);
|
|
210
393
|
}));
|
|
211
|
-
return function
|
|
212
|
-
return
|
|
394
|
+
return function insertItem(_x3) {
|
|
395
|
+
return _ref6.apply(this, arguments);
|
|
396
|
+
};
|
|
397
|
+
}();
|
|
398
|
+
var connectTo = /*#__PURE__*/function () {
|
|
399
|
+
var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(targetNodeId) {
|
|
400
|
+
var currentNode, targetNode, newEdge;
|
|
401
|
+
return _regeneratorRuntime().wrap(function _callee7$(_context7) {
|
|
402
|
+
while (1) switch (_context7.prev = _context7.next) {
|
|
403
|
+
case 0:
|
|
404
|
+
currentNode = reactFlowInstance.getNode(id);
|
|
405
|
+
targetNode = reactFlowInstance.getNode(targetNodeId);
|
|
406
|
+
if (!(!currentNode || !targetNode)) {
|
|
407
|
+
_context7.next = 4;
|
|
408
|
+
break;
|
|
409
|
+
}
|
|
410
|
+
return _context7.abrupt("return");
|
|
411
|
+
case 4:
|
|
412
|
+
_context7.prev = 4;
|
|
413
|
+
// 1. 创建新边
|
|
414
|
+
newEdge = createEdge(currentNode.id, targetNode.id);
|
|
415
|
+
reactFlowInstance.addEdges(newEdge);
|
|
416
|
+
|
|
417
|
+
// 2. 更新节点数据
|
|
418
|
+
currentNode.data.childIds = Array.from(new Set([].concat(_toConsumableArray(currentNode.data.childIds || []), [targetNode.id])));
|
|
419
|
+
targetNode.data.parentIds = Array.from(new Set([].concat(_toConsumableArray(targetNode.data.parentIds || []), [currentNode.id])));
|
|
420
|
+
reactFlowInstance.updateNodeData(currentNode.id, _objectSpread({}, currentNode.data));
|
|
421
|
+
reactFlowInstance.updateNodeData(targetNode.id, _objectSpread({}, targetNode.data));
|
|
422
|
+
_context7.next = 13;
|
|
423
|
+
return resetLayout();
|
|
424
|
+
case 13:
|
|
425
|
+
actionChange === null || actionChange === void 0 || actionChange();
|
|
426
|
+
_context7.next = 19;
|
|
427
|
+
break;
|
|
428
|
+
case 16:
|
|
429
|
+
_context7.prev = 16;
|
|
430
|
+
_context7.t0 = _context7["catch"](4);
|
|
431
|
+
console.error('[CustomNode-connectTo]', _context7.t0);
|
|
432
|
+
case 19:
|
|
433
|
+
case "end":
|
|
434
|
+
return _context7.stop();
|
|
435
|
+
}
|
|
436
|
+
}, _callee7, null, [[4, 16]]);
|
|
437
|
+
}));
|
|
438
|
+
return function connectTo(_x4) {
|
|
439
|
+
return _ref7.apply(this, arguments);
|
|
213
440
|
};
|
|
214
441
|
}();
|
|
215
|
-
var updateItem = function updateItem(data) {
|
|
216
|
-
reactFlowInstance.updateNodeData(id, _objectSpread({}, data));
|
|
217
|
-
actionChange === null || actionChange === void 0 || actionChange();
|
|
218
|
-
};
|
|
219
442
|
var actions = {
|
|
220
443
|
addItem: addItem,
|
|
444
|
+
insertItem: insertItem,
|
|
221
445
|
delItem: delItem,
|
|
446
|
+
delItemDeep: delItemDeep,
|
|
222
447
|
editItem: editItem,
|
|
223
|
-
|
|
448
|
+
connectTo: connectTo
|
|
449
|
+
};
|
|
450
|
+
var options = {
|
|
451
|
+
actions: actions,
|
|
452
|
+
reactFlowInstance: reactFlowInstance
|
|
224
453
|
};
|
|
225
454
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
226
455
|
children: [/*#__PURE__*/_jsx(NodeToolbar, {
|
|
227
456
|
isVisible: data.toolbarVisible,
|
|
228
457
|
position: Position.Top,
|
|
229
|
-
children: toolbarRender
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
458
|
+
children: toolbarRender === null || toolbarRender === void 0 ? void 0 : toolbarRender(data, options)
|
|
459
|
+
}), itemRender === null || itemRender === void 0 ? void 0 : itemRender(data, options), /*#__PURE__*/_jsx(Handle, {
|
|
460
|
+
type: "target",
|
|
461
|
+
position: Position.Top,
|
|
462
|
+
style: {
|
|
463
|
+
opacity: 0,
|
|
464
|
+
pointerEvents: 'none'
|
|
465
|
+
}
|
|
466
|
+
}), /*#__PURE__*/_jsx(Handle, {
|
|
467
|
+
type: "source",
|
|
468
|
+
position: Position.Bottom,
|
|
469
|
+
children: menuItems && /*#__PURE__*/_jsx(NodeButtonDiv, {
|
|
470
|
+
children: /*#__PURE__*/_jsx(Dropdown, {
|
|
471
|
+
menu: {
|
|
472
|
+
items: menuItems(data, options)
|
|
235
473
|
},
|
|
474
|
+
placement: 'rightTop',
|
|
236
475
|
children: /*#__PURE__*/_jsx(Button, {
|
|
476
|
+
icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
|
|
237
477
|
type: "primary",
|
|
238
|
-
|
|
239
|
-
icon: /*#__PURE__*/_jsx(DeleteOutlined, {})
|
|
478
|
+
shape: "circle"
|
|
240
479
|
})
|
|
241
|
-
})
|
|
242
|
-
icon: /*#__PURE__*/_jsx(EditOutlined, {}),
|
|
243
|
-
onClick: function onClick() {
|
|
244
|
-
return actions.editItem();
|
|
245
|
-
}
|
|
246
|
-
}), /*#__PURE__*/_jsx(Button, {
|
|
247
|
-
type: "primary",
|
|
248
|
-
icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
|
|
249
|
-
onClick: function onClick() {
|
|
250
|
-
return actions.addItem();
|
|
251
|
-
}
|
|
252
|
-
})]
|
|
480
|
+
})
|
|
253
481
|
})
|
|
254
|
-
}), itemRender ? itemRender(data, {
|
|
255
|
-
updateItem: updateItem
|
|
256
|
-
}) : /*#__PURE__*/_jsx("div", {
|
|
257
|
-
style: {
|
|
258
|
-
padding: 10
|
|
259
|
-
},
|
|
260
|
-
children: (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.label
|
|
261
|
-
}), /*#__PURE__*/_jsx(Handle, {
|
|
262
|
-
type: "target",
|
|
263
|
-
position: Position.Top
|
|
264
|
-
}), /*#__PURE__*/_jsx(Handle, {
|
|
265
|
-
type: "source",
|
|
266
|
-
position: Position.Bottom
|
|
267
482
|
})]
|
|
268
483
|
});
|
|
269
484
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import '@xyflow/react/dist/style.css';
|
|
2
2
|
import { IFlowProps, INodeData } from '../types';
|
|
3
|
-
export declare const Flow: <T extends INodeData = INodeData>({ value, defaultValue, layoutOptions: outsideLayoutOptions, itemRender, toolbarRender, onChange,
|
|
3
|
+
export declare const Flow: <T extends INodeData = INodeData>({ value, defaultValue, layoutOptions: outsideLayoutOptions, menuItems, itemRender, toolbarRender, onChange, }: IFlowProps<T>) => import("react/jsx-runtime").JSX.Element;
|