@nokecy/qc-ui 0.3.24 → 0.3.26
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/cjs/array-table/arrayBase.js +13 -1
- package/dist/cjs/index.d.ts +1 -2
- package/dist/cjs/index.js +0 -8
- package/dist/esm/array-table/arrayBase.js +12 -1
- package/dist/esm/index.d.ts +1 -2
- package/dist/esm/index.js +1 -2
- package/dist/umd/qc-ui.min.css +1 -1
- package/dist/umd/qc-ui.min.js +1 -1
- package/package.json +2 -14
- package/dist/cjs/elsa/components/finishNode.d.ts +0 -0
- package/dist/cjs/elsa/components/finishNode.js +0 -1
- package/dist/cjs/elsa/components/forkNode.d.ts +0 -0
- package/dist/cjs/elsa/components/forkNode.js +0 -1
- package/dist/cjs/elsa/components/ifNode.d.ts +0 -0
- package/dist/cjs/elsa/components/ifNode.js +0 -1
- package/dist/cjs/elsa/components/joinNode.d.ts +0 -0
- package/dist/cjs/elsa/components/joinNode.js +0 -1
- package/dist/cjs/elsa/components/setNameNode.d.ts +0 -0
- package/dist/cjs/elsa/components/setNameNode.js +0 -1
- package/dist/cjs/elsa/components/startNode.d.ts +0 -3
- package/dist/cjs/elsa/components/startNode.js +0 -24
- package/dist/cjs/elsa/components/switchNode.d.ts +0 -0
- package/dist/cjs/elsa/components/switchNode.js +0 -1
- package/dist/cjs/elsa/components/timerNode.d.ts +0 -0
- package/dist/cjs/elsa/components/timerNode.js +0 -1
- package/dist/cjs/elsa/components/userTaskNode/index.d.ts +0 -7
- package/dist/cjs/elsa/components/userTaskNode/index.js +0 -50
- package/dist/cjs/elsa/components/userTaskNode/index.less +0 -0
- package/dist/cjs/elsa/components/userTaskNode/register.d.ts +0 -1
- package/dist/cjs/elsa/components/userTaskNode/register.js +0 -54
- package/dist/cjs/elsa/elsa.design.d.ts +0 -4
- package/dist/cjs/elsa/elsa.design.js +0 -123
- package/dist/cjs/elsa/index.d.ts +0 -4
- package/dist/cjs/elsa/index.js +0 -40
- package/dist/cjs/elsa/index.less +0 -21
- package/dist/cjs/xflow/components/Wrapper.d.ts +0 -3
- package/dist/cjs/xflow/components/Wrapper.js +0 -26
- package/dist/cjs/xflow/components/XFlow.d.ts +0 -3
- package/dist/cjs/xflow/components/XFlow.js +0 -47
- package/dist/cjs/xflow/components/XFlowGraph.d.ts +0 -4
- package/dist/cjs/xflow/components/XFlowGraph.js +0 -73
- package/dist/cjs/xflow/components/graph-toolbar/index.d.ts +0 -19
- package/dist/cjs/xflow/components/graph-toolbar/index.js +0 -60
- package/dist/cjs/xflow/components/graph-toolbar/index.less +0 -11
- package/dist/cjs/xflow/components/index.d.ts +0 -3
- package/dist/cjs/xflow/components/index.js +0 -31
- package/dist/cjs/xflow/components/keyboard/index.d.ts +0 -3
- package/dist/cjs/xflow/components/keyboard/index.js +0 -40
- package/dist/cjs/xflow/components/minimap/index.d.ts +0 -3
- package/dist/cjs/xflow/components/minimap/index.js +0 -53
- package/dist/cjs/xflow/components/scroller/index.d.ts +0 -4
- package/dist/cjs/xflow/components/scroller/index.js +0 -49
- package/dist/cjs/xflow/components/selection/index.d.ts +0 -3
- package/dist/cjs/xflow/components/selection/index.js +0 -40
- package/dist/cjs/xflow/components/snapline/index.d.ts +0 -3
- package/dist/cjs/xflow/components/snapline/index.js +0 -40
- package/dist/cjs/xflow/components/transform/index.d.ts +0 -3
- package/dist/cjs/xflow/components/transform/index.js +0 -38
- package/dist/cjs/xflow/context/GraphContext.d.ts +0 -10
- package/dist/cjs/xflow/context/GraphContext.js +0 -21
- package/dist/cjs/xflow/hooks/clipboard/index.d.ts +0 -2
- package/dist/cjs/xflow/hooks/clipboard/index.js +0 -34
- package/dist/cjs/xflow/hooks/dnd/index.d.ts +0 -2
- package/dist/cjs/xflow/hooks/dnd/index.js +0 -29
- package/dist/cjs/xflow/hooks/format/index.d.ts +0 -5
- package/dist/cjs/xflow/hooks/format/index.js +0 -60
- package/dist/cjs/xflow/hooks/graph/index.d.ts +0 -1
- package/dist/cjs/xflow/hooks/graph/index.js +0 -19
- package/dist/cjs/xflow/hooks/history/index.d.ts +0 -4
- package/dist/cjs/xflow/hooks/history/index.js +0 -63
- package/dist/cjs/xflow/hooks/keyboard/index.d.ts +0 -13
- package/dist/cjs/xflow/hooks/keyboard/index.js +0 -55
- package/dist/cjs/xflow/hooks/selection/index.d.ts +0 -3
- package/dist/cjs/xflow/hooks/selection/index.js +0 -41
- package/dist/cjs/xflow/hooks/snapline/index.d.ts +0 -2
- package/dist/cjs/xflow/hooks/snapline/index.js +0 -21
- package/dist/cjs/xflow/hooks/transform/index.d.ts +0 -2
- package/dist/cjs/xflow/hooks/transform/index.js +0 -21
- package/dist/cjs/xflow/index.d.ts +0 -3
- package/dist/cjs/xflow/index.js +0 -44
- package/dist/cjs/xflow/styles/index.less +0 -0
- package/dist/cjs/xflow/types/index.d.ts +0 -19
- package/dist/cjs/xflow/types/index.js +0 -5
- package/dist/cjs/xflow/util/algorithm.d.ts +0 -1
- package/dist/cjs/xflow/util/algorithm.js +0 -10
- package/dist/cjs/xflow/util/index.d.ts +0 -2
- package/dist/cjs/xflow/util/index.js +0 -16
- package/dist/cjs/xflow/util/main.d.ts +0 -2
- package/dist/cjs/xflow/util/main.js +0 -31
- package/dist/cjs/xflow/util/model.d.ts +0 -2
- package/dist/cjs/xflow/util/model.js +0 -29
- package/dist/esm/elsa/components/finishNode.d.ts +0 -0
- package/dist/esm/elsa/components/finishNode.js +0 -0
- package/dist/esm/elsa/components/forkNode.d.ts +0 -0
- package/dist/esm/elsa/components/forkNode.js +0 -0
- package/dist/esm/elsa/components/ifNode.d.ts +0 -0
- package/dist/esm/elsa/components/ifNode.js +0 -0
- package/dist/esm/elsa/components/joinNode.d.ts +0 -0
- package/dist/esm/elsa/components/joinNode.js +0 -0
- package/dist/esm/elsa/components/setNameNode.d.ts +0 -0
- package/dist/esm/elsa/components/setNameNode.js +0 -0
- package/dist/esm/elsa/components/startNode.d.ts +0 -3
- package/dist/esm/elsa/components/startNode.js +0 -14
- package/dist/esm/elsa/components/switchNode.d.ts +0 -0
- package/dist/esm/elsa/components/switchNode.js +0 -0
- package/dist/esm/elsa/components/timerNode.d.ts +0 -0
- package/dist/esm/elsa/components/timerNode.js +0 -0
- package/dist/esm/elsa/components/userTaskNode/index.d.ts +0 -7
- package/dist/esm/elsa/components/userTaskNode/index.js +0 -33
- package/dist/esm/elsa/components/userTaskNode/index.less +0 -0
- package/dist/esm/elsa/components/userTaskNode/register.d.ts +0 -1
- package/dist/esm/elsa/components/userTaskNode/register.js +0 -48
- package/dist/esm/elsa/elsa.design.d.ts +0 -4
- package/dist/esm/elsa/elsa.design.js +0 -105
- package/dist/esm/elsa/index.d.ts +0 -4
- package/dist/esm/elsa/index.js +0 -25
- package/dist/esm/elsa/index.less +0 -21
- package/dist/esm/xflow/components/Wrapper.d.ts +0 -3
- package/dist/esm/xflow/components/Wrapper.js +0 -15
- package/dist/esm/xflow/components/XFlow.d.ts +0 -3
- package/dist/esm/xflow/components/XFlow.js +0 -32
- package/dist/esm/xflow/components/XFlowGraph.d.ts +0 -4
- package/dist/esm/xflow/components/XFlowGraph.js +0 -54
- package/dist/esm/xflow/components/graph-toolbar/index.d.ts +0 -19
- package/dist/esm/xflow/components/graph-toolbar/index.js +0 -44
- package/dist/esm/xflow/components/graph-toolbar/index.less +0 -11
- package/dist/esm/xflow/components/index.d.ts +0 -3
- package/dist/esm/xflow/components/index.js +0 -3
- package/dist/esm/xflow/components/keyboard/index.d.ts +0 -3
- package/dist/esm/xflow/components/keyboard/index.js +0 -22
- package/dist/esm/xflow/components/minimap/index.d.ts +0 -3
- package/dist/esm/xflow/components/minimap/index.js +0 -35
- package/dist/esm/xflow/components/scroller/index.d.ts +0 -4
- package/dist/esm/xflow/components/scroller/index.js +0 -28
- package/dist/esm/xflow/components/selection/index.d.ts +0 -3
- package/dist/esm/xflow/components/selection/index.js +0 -22
- package/dist/esm/xflow/components/snapline/index.d.ts +0 -3
- package/dist/esm/xflow/components/snapline/index.js +0 -22
- package/dist/esm/xflow/components/transform/index.d.ts +0 -3
- package/dist/esm/xflow/components/transform/index.js +0 -20
- package/dist/esm/xflow/context/GraphContext.d.ts +0 -10
- package/dist/esm/xflow/context/GraphContext.js +0 -9
- package/dist/esm/xflow/hooks/clipboard/index.d.ts +0 -2
- package/dist/esm/xflow/hooks/clipboard/index.js +0 -22
- package/dist/esm/xflow/hooks/dnd/index.d.ts +0 -2
- package/dist/esm/xflow/hooks/dnd/index.js +0 -17
- package/dist/esm/xflow/hooks/format/index.d.ts +0 -5
- package/dist/esm/xflow/hooks/format/index.js +0 -48
- package/dist/esm/xflow/hooks/graph/index.d.ts +0 -1
- package/dist/esm/xflow/hooks/graph/index.js +0 -8
- package/dist/esm/xflow/hooks/history/index.d.ts +0 -4
- package/dist/esm/xflow/hooks/history/index.js +0 -45
- package/dist/esm/xflow/hooks/keyboard/index.d.ts +0 -13
- package/dist/esm/xflow/hooks/keyboard/index.js +0 -40
- package/dist/esm/xflow/hooks/selection/index.d.ts +0 -3
- package/dist/esm/xflow/hooks/selection/index.js +0 -25
- package/dist/esm/xflow/hooks/snapline/index.d.ts +0 -2
- package/dist/esm/xflow/hooks/snapline/index.js +0 -9
- package/dist/esm/xflow/hooks/transform/index.d.ts +0 -2
- package/dist/esm/xflow/hooks/transform/index.js +0 -9
- package/dist/esm/xflow/index.d.ts +0 -3
- package/dist/esm/xflow/index.js +0 -3
- package/dist/esm/xflow/styles/index.less +0 -0
- package/dist/esm/xflow/types/index.d.ts +0 -19
- package/dist/esm/xflow/types/index.js +0 -1
- package/dist/esm/xflow/util/algorithm.d.ts +0 -1
- package/dist/esm/xflow/util/algorithm.js +0 -1
- package/dist/esm/xflow/util/index.d.ts +0 -2
- package/dist/esm/xflow/util/index.js +0 -2
- package/dist/esm/xflow/util/main.d.ts +0 -2
- package/dist/esm/xflow/util/main.js +0 -2
- package/dist/esm/xflow/util/model.d.ts +0 -2
- package/dist/esm/xflow/util/model.js +0 -19
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import React, { useEffect } from 'react';
|
|
2
|
-
import { useGraph } from "../xflow/hooks/graph";
|
|
3
|
-
import { XFlowGraph } from "../xflow";
|
|
4
|
-
import "./components/userTaskNode/register";
|
|
5
|
-
var defaultNodeOptions = {
|
|
6
|
-
width: 100,
|
|
7
|
-
height: 60
|
|
8
|
-
};
|
|
9
|
-
var defaultEdgeOptions = {
|
|
10
|
-
attrs: {
|
|
11
|
-
line: {
|
|
12
|
-
strokeDasharray: '5 5'
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
var graphConfig = {
|
|
17
|
-
background: {
|
|
18
|
-
color: "#F2F7FA"
|
|
19
|
-
},
|
|
20
|
-
connecting: {
|
|
21
|
-
//连线的过程中距离节点或者连接桩 50px 时会触发自动吸附
|
|
22
|
-
snap: true,
|
|
23
|
-
//是否允许连接到画布空白位置的点
|
|
24
|
-
allowBlank: true,
|
|
25
|
-
//是否允许在相同的起始节点和终止之间创建多条边
|
|
26
|
-
allowMulti: false,
|
|
27
|
-
//是否允许创建循环连线
|
|
28
|
-
allowLoop: false,
|
|
29
|
-
//是否允许边链接到节点(非节点上的链接桩)
|
|
30
|
-
allowNode: true,
|
|
31
|
-
//拖动边时,是否高亮显示所有可用的连接桩或节点
|
|
32
|
-
highlight: true
|
|
33
|
-
},
|
|
34
|
-
interacting: {
|
|
35
|
-
arrowheadMovable: true
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
var ElsaDesign = function ElsaDesign(props) {
|
|
40
|
-
var graph = useGraph();
|
|
41
|
-
useEffect(function () {
|
|
42
|
-
graph === null || graph === void 0 ? void 0 : graph.on("node:mouseenter", function (args) {});
|
|
43
|
-
graph === null || graph === void 0 ? void 0 : graph.on("node:mouseleave", function (args) {});
|
|
44
|
-
graph === null || graph === void 0 ? void 0 : graph.on("edge:mouseenter", function (_ref) {
|
|
45
|
-
var cell = _ref.cell;
|
|
46
|
-
cell.addTools(['source-arrowhead', {
|
|
47
|
-
name: 'target-arrowhead',
|
|
48
|
-
args: {
|
|
49
|
-
attrs: {
|
|
50
|
-
fill: 'red'
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}]);
|
|
54
|
-
});
|
|
55
|
-
graph === null || graph === void 0 ? void 0 : graph.on('edge:mouseleave', function (_ref2) {
|
|
56
|
-
var cell = _ref2.cell;
|
|
57
|
-
cell.removeTools();
|
|
58
|
-
});
|
|
59
|
-
graph === null || graph === void 0 ? void 0 : graph.on("edge:connected", function (_ref3) {
|
|
60
|
-
var isNew = _ref3.isNew,
|
|
61
|
-
edge = _ref3.edge;
|
|
62
|
-
|
|
63
|
-
if (isNew) {
|
|
64
|
-
edge.setSource(edge.getSourceNode(), {
|
|
65
|
-
selector: undefined
|
|
66
|
-
}, undefined);
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
graph === null || graph === void 0 ? void 0 : graph.bindKey('backspace', function () {
|
|
70
|
-
var cells = graph.getSelectedCells();
|
|
71
|
-
|
|
72
|
-
if (cells.length) {
|
|
73
|
-
graph.removeCells(cells);
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
}, [graph]);
|
|
77
|
-
return /*#__PURE__*/React.createElement(XFlowGraph, {
|
|
78
|
-
zoomToFit: true,
|
|
79
|
-
data: [{
|
|
80
|
-
id: '1',
|
|
81
|
-
shape: 'UserTaskNode',
|
|
82
|
-
x: 100,
|
|
83
|
-
y: 100,
|
|
84
|
-
label: 'source'
|
|
85
|
-
}, {
|
|
86
|
-
id: '2',
|
|
87
|
-
shape: 'UserTaskNode',
|
|
88
|
-
x: 300,
|
|
89
|
-
y: 300,
|
|
90
|
-
label: 'target'
|
|
91
|
-
}, {
|
|
92
|
-
id: '3',
|
|
93
|
-
shape: 'UserTaskNode',
|
|
94
|
-
x: 400,
|
|
95
|
-
y: 400,
|
|
96
|
-
label: 'target'
|
|
97
|
-
}],
|
|
98
|
-
defaultNodeOptions: defaultNodeOptions,
|
|
99
|
-
defaultEdgeOptions: defaultEdgeOptions,
|
|
100
|
-
configs: graphConfig,
|
|
101
|
-
centerContent: true
|
|
102
|
-
});
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
export default ElsaDesign;
|
package/dist/esm/elsa/index.d.ts
DELETED
package/dist/esm/elsa/index.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Selection } from "../xflow/components/selection";
|
|
3
|
-
import { Keyboard } from "../xflow/components/keyboard";
|
|
4
|
-
import { XFlow } from "../xflow";
|
|
5
|
-
import ElsaDesign from "./elsa.design";
|
|
6
|
-
import "./index.less";
|
|
7
|
-
|
|
8
|
-
var Elsa = function Elsa(props) {
|
|
9
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
10
|
-
style: {
|
|
11
|
-
height: 400
|
|
12
|
-
}
|
|
13
|
-
}, /*#__PURE__*/React.createElement(XFlow, null, /*#__PURE__*/React.createElement(Selection, {
|
|
14
|
-
enabled: true,
|
|
15
|
-
multiple: true,
|
|
16
|
-
rubberEdge: true,
|
|
17
|
-
rubberNode: true,
|
|
18
|
-
modifiers: "shift",
|
|
19
|
-
rubberband: true
|
|
20
|
-
}), /*#__PURE__*/React.createElement(Keyboard, {
|
|
21
|
-
enabled: true
|
|
22
|
-
}), /*#__PURE__*/React.createElement(ElsaDesign, null)));
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export default Elsa;
|
package/dist/esm/elsa/index.less
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
.x6-node-selected .userTask {
|
|
2
|
-
border-color: #52c41a;
|
|
3
|
-
border-radius: 2px;
|
|
4
|
-
box-shadow: 0 0 0 4px #ccecc0;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.x6-node-selected .userTask .failed {
|
|
8
|
-
border-color: #ff4d4f;
|
|
9
|
-
border-radius: 2px;
|
|
10
|
-
box-shadow: 0 0 0 4px #fedcdc;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.x6-edge:hover path:nth-child(2) {
|
|
14
|
-
stroke: #1890ff;
|
|
15
|
-
stroke-width: 1px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.x6-edge-selected path:nth-child(2) {
|
|
19
|
-
stroke: #1890ff;
|
|
20
|
-
stroke-width: 3px !important;
|
|
21
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useGraph } from "../hooks/graph";
|
|
3
|
-
|
|
4
|
-
var Wrapper = function Wrapper(_ref) {
|
|
5
|
-
var children = _ref.children;
|
|
6
|
-
var graph = useGraph();
|
|
7
|
-
|
|
8
|
-
if (graph) {
|
|
9
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
return null;
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export default Wrapper;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
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); }
|
|
6
|
-
|
|
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; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
|
-
import React, { useState } from 'react';
|
|
14
|
-
import { Provider } from "../context/GraphContext";
|
|
15
|
-
|
|
16
|
-
var XFlow = function XFlow(_ref) {
|
|
17
|
-
var children = _ref.children;
|
|
18
|
-
|
|
19
|
-
var _useState = useState(null),
|
|
20
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
21
|
-
graph = _useState2[0],
|
|
22
|
-
setGraph = _useState2[1];
|
|
23
|
-
|
|
24
|
-
return /*#__PURE__*/React.createElement(Provider, {
|
|
25
|
-
value: {
|
|
26
|
-
graph: graph,
|
|
27
|
-
setGraph: setGraph
|
|
28
|
-
}
|
|
29
|
-
}, children);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export default XFlow;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
|
|
7
|
-
import React, { useContext, useRef, useEffect, useLayoutEffect } from 'react';
|
|
8
|
-
import { GraphContext } from "../context/GraphContext";
|
|
9
|
-
import { Graph } from '@antv/x6';
|
|
10
|
-
import { Util } from "../util";
|
|
11
|
-
|
|
12
|
-
var XFlowGraph = function XFlowGraph(props) {
|
|
13
|
-
var container = useRef(null);
|
|
14
|
-
|
|
15
|
-
var _useContext = useContext(GraphContext),
|
|
16
|
-
graph = _useContext.graph,
|
|
17
|
-
setGraph = _useContext.setGraph;
|
|
18
|
-
|
|
19
|
-
useEffect(function () {
|
|
20
|
-
var graph = new Graph(_objectSpread({
|
|
21
|
-
container: container.current,
|
|
22
|
-
autoResize: true
|
|
23
|
-
}, props.configs));
|
|
24
|
-
setGraph(graph);
|
|
25
|
-
}, []);
|
|
26
|
-
useLayoutEffect(function () {
|
|
27
|
-
if (graph && props.data.length > 0) {
|
|
28
|
-
var data = props.data,
|
|
29
|
-
defaultNodeOptions = props.defaultNodeOptions,
|
|
30
|
-
defaultEdgeOptions = props.defaultEdgeOptions,
|
|
31
|
-
centerContent = props.centerContent;
|
|
32
|
-
var model = Util.preprocess(data, defaultNodeOptions, defaultEdgeOptions);
|
|
33
|
-
graph.fromJSON(model);
|
|
34
|
-
|
|
35
|
-
if (centerContent) {
|
|
36
|
-
graph.centerContent();
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}, [graph, props.data]);
|
|
40
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
41
|
-
style: {
|
|
42
|
-
width: '100%',
|
|
43
|
-
height: '100%'
|
|
44
|
-
}
|
|
45
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
46
|
-
ref: container,
|
|
47
|
-
style: {
|
|
48
|
-
width: '100%',
|
|
49
|
-
height: '100%'
|
|
50
|
-
}
|
|
51
|
-
}));
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
export default XFlowGraph;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { FC, ReactElement } from 'react';
|
|
2
|
-
export declare enum Direction {
|
|
3
|
-
vertical = "vertical",
|
|
4
|
-
horizontal = "horizontal"
|
|
5
|
-
}
|
|
6
|
-
export interface GraphToolbarItem {
|
|
7
|
-
name: string;
|
|
8
|
-
text?: string;
|
|
9
|
-
tooltip: string;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
icon: ReactElement;
|
|
12
|
-
onClick: () => void;
|
|
13
|
-
}
|
|
14
|
-
export interface GraphToolbarProps {
|
|
15
|
-
className: string;
|
|
16
|
-
items: GraphToolbarItem[];
|
|
17
|
-
direction?: Direction;
|
|
18
|
-
}
|
|
19
|
-
export declare const GraphToolbar: FC<GraphToolbarProps>;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { Tooltip } from 'antd';
|
|
5
|
-
import classnames from 'classnames';
|
|
6
|
-
import style from "./index.less";
|
|
7
|
-
export var Direction;
|
|
8
|
-
|
|
9
|
-
(function (Direction) {
|
|
10
|
-
Direction["vertical"] = "vertical";
|
|
11
|
-
Direction["horizontal"] = "horizontal";
|
|
12
|
-
})(Direction || (Direction = {}));
|
|
13
|
-
|
|
14
|
-
var ToolbarItem = function ToolbarItem(props) {
|
|
15
|
-
var name = props.name,
|
|
16
|
-
text = props.text,
|
|
17
|
-
icon = props.icon,
|
|
18
|
-
disabled = props.disabled,
|
|
19
|
-
_onClick = props.onClick;
|
|
20
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
21
|
-
key: name,
|
|
22
|
-
disabled: disabled,
|
|
23
|
-
onClick: function onClick() {
|
|
24
|
-
return disabled && _onClick();
|
|
25
|
-
},
|
|
26
|
-
className: classnames(style.item, _defineProperty({}, style.disabled, disabled))
|
|
27
|
-
}, icon, text);
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export var GraphToolbar = function GraphToolbar(props) {
|
|
31
|
-
var _classnames2;
|
|
32
|
-
|
|
33
|
-
var className = props.className,
|
|
34
|
-
items = props.items,
|
|
35
|
-
direction = props.direction;
|
|
36
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
37
|
-
className: classnames(className, style.graphToolbar, (_classnames2 = {}, _defineProperty(_classnames2, style.vertical, direction === Direction.vertical), _defineProperty(_classnames2, style.horizontal, direction === Direction.horizontal), _classnames2))
|
|
38
|
-
}, items.map(function (item) {
|
|
39
|
-
return item.tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
|
|
40
|
-
key: item.name,
|
|
41
|
-
title: item.tooltip
|
|
42
|
-
}, /*#__PURE__*/React.createElement(ToolbarItem, item)) : /*#__PURE__*/React.createElement(ToolbarItem, item);
|
|
43
|
-
}));
|
|
44
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useEffect } from 'react';
|
|
2
|
-
import { Keyboard as X6Keyboard } from '@antv/x6-plugin-keyboard';
|
|
3
|
-
import { useGraph } from "../../hooks/graph";
|
|
4
|
-
export var Keyboard = function Keyboard(props) {
|
|
5
|
-
var graph = useGraph();
|
|
6
|
-
var initKeyboard = useCallback(function () {
|
|
7
|
-
if (graph) {
|
|
8
|
-
var keyboard = graph.getPlugin(X6Keyboard.name);
|
|
9
|
-
|
|
10
|
-
if (keyboard) {// TODO: add setOptions function to handle
|
|
11
|
-
// scroller.setOptions(options)
|
|
12
|
-
} else {
|
|
13
|
-
var graphKeyboard = new X6Keyboard(props);
|
|
14
|
-
graph.use(graphKeyboard);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}, [graph, props]);
|
|
18
|
-
useEffect(function () {
|
|
19
|
-
initKeyboard();
|
|
20
|
-
}, [graph, props, initKeyboard]);
|
|
21
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
22
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
|
|
7
|
-
import React, { useRef, useEffect, useCallback } from 'react';
|
|
8
|
-
import { MiniMap } from '@antv/x6-plugin-minimap';
|
|
9
|
-
import { useGraph } from "../../hooks/graph";
|
|
10
|
-
export var Minimap = function Minimap(props) {
|
|
11
|
-
var graph = useGraph();
|
|
12
|
-
var mapRef = useRef(null);
|
|
13
|
-
var initMinimap = useCallback(function () {
|
|
14
|
-
if (mapRef.current && graph) {
|
|
15
|
-
var options = _objectSpread(_objectSpread({}, props), {}, {
|
|
16
|
-
container: mapRef.current
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
var minimap = graph.getPlugin(MiniMap.name);
|
|
20
|
-
|
|
21
|
-
if (minimap) {// TODO: add setOption function
|
|
22
|
-
// minimap.setOptions(options)
|
|
23
|
-
} else {
|
|
24
|
-
var GraphMinimap = new MiniMap(options);
|
|
25
|
-
graph.use(GraphMinimap);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}, [mapRef, props, graph]);
|
|
29
|
-
useEffect(function () {
|
|
30
|
-
initMinimap();
|
|
31
|
-
}, [mapRef, graph, initMinimap]);
|
|
32
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
33
|
-
ref: mapRef
|
|
34
|
-
});
|
|
35
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useEffect, useMemo } from 'react';
|
|
2
|
-
import { Scroller as X6Scroll } from '@antv/x6-plugin-scroller';
|
|
3
|
-
import { useGraph } from "../../hooks/graph";
|
|
4
|
-
export var Scroller = function Scroller(props) {
|
|
5
|
-
var graph = useGraph();
|
|
6
|
-
var initScroller = useCallback(function () {
|
|
7
|
-
if (graph) {
|
|
8
|
-
var scroller = graph.getPlugin(X6Scroll.name);
|
|
9
|
-
|
|
10
|
-
if (scroller) {// TODO: add setOptions function to handle
|
|
11
|
-
// scroller.setOptions(options)
|
|
12
|
-
} else {
|
|
13
|
-
var graphScroller = new X6Scroll(props);
|
|
14
|
-
graph.use(graphScroller);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}, [graph, props]);
|
|
18
|
-
useEffect(function () {
|
|
19
|
-
initScroller();
|
|
20
|
-
}, [graph, props, initScroller]);
|
|
21
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
22
|
-
};
|
|
23
|
-
export var useScroller = function useScroller() {
|
|
24
|
-
var graph = useGraph();
|
|
25
|
-
return useMemo(function () {
|
|
26
|
-
return graph && graph.getPlugin(X6Scroll.name);
|
|
27
|
-
}, [graph]);
|
|
28
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useEffect } from 'react';
|
|
2
|
-
import { Selection as X6Selection } from '@antv/x6-plugin-selection';
|
|
3
|
-
import { useGraph } from "../../hooks/graph";
|
|
4
|
-
export var Selection = function Selection(props) {
|
|
5
|
-
var graph = useGraph();
|
|
6
|
-
var initSelection = useCallback(function () {
|
|
7
|
-
if (graph) {
|
|
8
|
-
var selection = graph.getPlugin(X6Selection.name);
|
|
9
|
-
|
|
10
|
-
if (selection) {// TODO: add setOptions function to handle
|
|
11
|
-
// selection.setOptions(options)
|
|
12
|
-
} else {
|
|
13
|
-
var xflowSelection = new X6Selection(props);
|
|
14
|
-
graph.use(xflowSelection);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}, [graph, props]);
|
|
18
|
-
useEffect(function () {
|
|
19
|
-
initSelection();
|
|
20
|
-
}, [graph]);
|
|
21
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
22
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useEffect } from 'react';
|
|
2
|
-
import { Snapline as X6Snapline } from '@antv/x6-plugin-snapline';
|
|
3
|
-
import { useGraph } from "../../hooks/graph";
|
|
4
|
-
export var Snapline = function Snapline(props) {
|
|
5
|
-
var graph = useGraph();
|
|
6
|
-
var initSnapline = useCallback(function () {
|
|
7
|
-
if (graph) {
|
|
8
|
-
var snapline = graph.getPlugin(X6Snapline.name);
|
|
9
|
-
|
|
10
|
-
if (snapline) {// TODO: add setOption function
|
|
11
|
-
// snapline.setOption(props)
|
|
12
|
-
} else {
|
|
13
|
-
var graphSnapline = new X6Snapline(props);
|
|
14
|
-
graph.use(graphSnapline);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}, [graph, props]);
|
|
18
|
-
useEffect(function () {
|
|
19
|
-
initSnapline();
|
|
20
|
-
}, [graph]);
|
|
21
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
22
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useEffect } from 'react';
|
|
2
|
-
import { Transform as X6Transform } from '@antv/x6-plugin-transform';
|
|
3
|
-
import { useGraph } from "../../hooks/graph";
|
|
4
|
-
export var Transform = function Transform(props) {
|
|
5
|
-
var graph = useGraph();
|
|
6
|
-
var initTransform = useCallback(function () {
|
|
7
|
-
if (graph) {
|
|
8
|
-
if (!graph.getPlugin(X6Transform.name)) {
|
|
9
|
-
var transform = new X6Transform(props);
|
|
10
|
-
graph.use(transform);
|
|
11
|
-
}
|
|
12
|
-
} else {
|
|
13
|
-
console.error('Transform has been initialized, can not initialize again!');
|
|
14
|
-
}
|
|
15
|
-
}, [graph, props]);
|
|
16
|
-
useEffect(function () {
|
|
17
|
-
initTransform();
|
|
18
|
-
}, [graph]);
|
|
19
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
20
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { Graph } from '@antv/x6';
|
|
3
|
-
interface GraphContextValue {
|
|
4
|
-
graph: Graph | null;
|
|
5
|
-
setGraph: (graph: Graph) => void;
|
|
6
|
-
}
|
|
7
|
-
export declare const GraphContext: import("react").Context<GraphContextValue>;
|
|
8
|
-
export declare const Provider: import("react").Provider<GraphContextValue>;
|
|
9
|
-
export declare const Consumer: import("react").Consumer<GraphContextValue>;
|
|
10
|
-
export default GraphContext;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { createContext } from 'react';
|
|
2
|
-
var defaultValue = {
|
|
3
|
-
graph: null,
|
|
4
|
-
setGraph: function setGraph() {}
|
|
5
|
-
};
|
|
6
|
-
export var GraphContext = /*#__PURE__*/createContext(defaultValue);
|
|
7
|
-
export var Provider = GraphContext.Provider;
|
|
8
|
-
export var Consumer = GraphContext.Consumer;
|
|
9
|
-
export default GraphContext;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
import { Clipboard } from '@antv/x6-plugin-clipboard';
|
|
3
|
-
import { useGraph } from "../graph";
|
|
4
|
-
export var useClipboard = function useClipboard(options) {
|
|
5
|
-
var graph = useGraph();
|
|
6
|
-
return useMemo(function () {
|
|
7
|
-
if (graph) {
|
|
8
|
-
var clipboard = graph.getPlugin(Clipboard.name);
|
|
9
|
-
|
|
10
|
-
if (options) {
|
|
11
|
-
if (clipboard) {// TODO: add setOptions function
|
|
12
|
-
// clipboard.setOptions(options)
|
|
13
|
-
} else {
|
|
14
|
-
var graphClipboard = new Clipboard(options);
|
|
15
|
-
return graphClipboard;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
return clipboard;
|
|
20
|
-
}
|
|
21
|
-
}, [graph, options]);
|
|
22
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
-
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
|
|
5
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
|
|
7
|
-
import { useMemo } from 'react';
|
|
8
|
-
import { Dnd } from '@antv/x6-plugin-dnd';
|
|
9
|
-
import { useGraph } from "../graph";
|
|
10
|
-
export var useDnd = function useDnd(options) {
|
|
11
|
-
var graph = useGraph();
|
|
12
|
-
return useMemo(function () {
|
|
13
|
-
return graph && new Dnd(_objectSpread(_objectSpread({}, options), {}, {
|
|
14
|
-
target: graph
|
|
15
|
-
}));
|
|
16
|
-
}, [graph, options]);
|
|
17
|
-
};
|