ronds-metadata 1.3.24 → 1.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/es/comps/DynamicPorts/comps/GraphHandler/index.d.ts +1 -0
- package/es/comps/DynamicPorts/comps/GraphHandler/index.js +20 -4
- package/es/comps/DynamicPorts/comps/GraphHandler/index.less +5 -0
- package/es/comps/DynamicPorts/comps/shape/edge.js +2 -2
- package/es/comps/DynamicPorts/graph.d.ts +2 -0
- package/es/comps/DynamicPorts/graph.js +90 -9
- package/es/comps/DynamicPorts/index.d.ts +4 -0
- package/es/comps/DynamicPorts/index.js +13 -2
- package/es/comps/DynamicPorts/utils.d.ts +40 -0
- package/es/comps/DynamicPorts/utils.js +64 -33
- package/es/comps/Editable/DataCell/Input.js +2 -1
- package/es/framework/graph/index.d.ts +2 -0
- package/es/framework/graph/index.js +31 -4
- package/es/framework/graph/index.less +4 -4
- package/es/utils.d.ts +3 -0
- package/es/utils.js +23 -1
- package/package.json +1 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import "antd/es/popover/style";
|
|
2
2
|
import _Popover from "antd/es/popover";
|
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
4
|
/*
|
|
4
5
|
* @Author: wangxian
|
|
5
6
|
* @Date: 2022-05-27 14:21:23
|
|
6
|
-
* @LastEditTime:
|
|
7
|
+
* @LastEditTime: 2023-11-29 15:54:57
|
|
7
8
|
*/
|
|
8
9
|
import React from 'react';
|
|
9
|
-
import { CompressOutlined, OneToOneOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
|
|
10
|
+
import { CompressOutlined, GatewayOutlined, OneToOneOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
|
|
10
11
|
import classNames from 'classnames';
|
|
11
12
|
import './index.less';
|
|
12
13
|
import { tr } from '../../../../framework/locale';
|
|
@@ -15,7 +16,12 @@ export var GraphHandler = function GraphHandler(props) {
|
|
|
15
16
|
onZoomIn = props.onZoomIn,
|
|
16
17
|
onZoomOut = props.onZoomOut,
|
|
17
18
|
onFitContent = props.onFitContent,
|
|
18
|
-
onRealContent = props.onRealContent
|
|
19
|
+
onRealContent = props.onRealContent,
|
|
20
|
+
onToggleSelectionEnabled = props.onToggleSelectionEnabled;
|
|
21
|
+
var _React$useState = React.useState(false),
|
|
22
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
23
|
+
isSelectionEnabled = _React$useState2[0],
|
|
24
|
+
setSelectionEnabled = _React$useState2[1];
|
|
19
25
|
return /*#__PURE__*/React.createElement("ul", {
|
|
20
26
|
className: classNames('handler', className)
|
|
21
27
|
}, /*#__PURE__*/React.createElement(_Popover, {
|
|
@@ -32,7 +38,17 @@ export var GraphHandler = function GraphHandler(props) {
|
|
|
32
38
|
}, /*#__PURE__*/React.createElement("li", {
|
|
33
39
|
onClick: onZoomOut,
|
|
34
40
|
className: "item"
|
|
35
|
-
}, /*#__PURE__*/React.createElement(ZoomOutOutlined, null))), /*#__PURE__*/React.createElement(_Popover, {
|
|
41
|
+
}, /*#__PURE__*/React.createElement(ZoomOutOutlined, null))), onToggleSelectionEnabled && /*#__PURE__*/React.createElement(_Popover, {
|
|
42
|
+
overlayClassName: "popover",
|
|
43
|
+
content: tr('框选'),
|
|
44
|
+
placement: "left"
|
|
45
|
+
}, /*#__PURE__*/React.createElement("li", {
|
|
46
|
+
onClick: function onClick() {
|
|
47
|
+
onToggleSelectionEnabled();
|
|
48
|
+
setSelectionEnabled(!isSelectionEnabled);
|
|
49
|
+
},
|
|
50
|
+
className: "item ".concat(isSelectionEnabled && 'tools-selected')
|
|
51
|
+
}, /*#__PURE__*/React.createElement(GatewayOutlined, null))), /*#__PURE__*/React.createElement(_Popover, {
|
|
36
52
|
overlayClassName: "popover",
|
|
37
53
|
content: tr('实际尺寸'),
|
|
38
54
|
placement: "left"
|
|
@@ -5,7 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
|
5
5
|
/*
|
|
6
6
|
* @Author: wangxian
|
|
7
7
|
* @Date: 2022-05-24 09:18:34
|
|
8
|
-
* @LastEditTime: 2023-
|
|
8
|
+
* @LastEditTime: 2023-11-29 15:45:34
|
|
9
9
|
*/
|
|
10
10
|
import { Shape, Edge } from '@antv/x6';
|
|
11
11
|
import './edge.less';
|
|
@@ -40,7 +40,7 @@ DPEdge.config({
|
|
|
40
40
|
connector: {
|
|
41
41
|
name: 'pai'
|
|
42
42
|
},
|
|
43
|
-
zIndex:
|
|
43
|
+
zIndex: 1,
|
|
44
44
|
attrs: {
|
|
45
45
|
line: {
|
|
46
46
|
stroke: '#808080',
|
|
@@ -68,6 +68,8 @@ declare class DPGraph extends GraphCore<BaseNode, BaseEdge> {
|
|
|
68
68
|
edges: DPEdge[];
|
|
69
69
|
}): void;
|
|
70
70
|
onContextMenu(data: ContextMenuInfo): any;
|
|
71
|
+
onAddCopyCells(nodes: DPNode[], edges: DPEdge[]): void;
|
|
72
|
+
onCopyNodes(args: any[]): void;
|
|
71
73
|
updateNodeNameById(id: string, name: string): void;
|
|
72
74
|
clearContextMenuInfo: () => void;
|
|
73
75
|
clearGraphCells: () => void;
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import "antd/es/message/style";
|
|
2
|
+
import _message from "antd/es/message";
|
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
1
4
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
5
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
6
|
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
@@ -13,7 +16,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
|
13
16
|
/*
|
|
14
17
|
* @Author: wangxian
|
|
15
18
|
* @Date: 2022-05-24 14:31:01
|
|
16
|
-
* @LastEditTime: 2023-
|
|
19
|
+
* @LastEditTime: 2023-12-05 09:54:43
|
|
17
20
|
*/
|
|
18
21
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
19
22
|
import produce from 'immer';
|
|
@@ -27,9 +30,10 @@ import { GraphCore } from '../../framework/graph';
|
|
|
27
30
|
import NodeElement from './comps/NodeElement';
|
|
28
31
|
import { DPEdge } from './comps/shape/edge';
|
|
29
32
|
import { DPNode } from './comps/shape/node';
|
|
30
|
-
import { formatGraphData, formatNodeInfoToNodeMeta } from './utils';
|
|
31
|
-
import { deepClone } from '../../utils';
|
|
33
|
+
import { formatGraphData, copy, formatNodeInfoToNodeMeta, formattedEdgesToEdgeMeta, isClipboardEmpty, cleanClipboard } from './utils';
|
|
34
|
+
import { deepClone, guid } from '../../utils';
|
|
32
35
|
import { MetadataService } from '../../framework/metadata/MetadataService';
|
|
36
|
+
import { tr } from '../../framework/locale';
|
|
33
37
|
var DPGraph = /*#__PURE__*/function (_GraphCore) {
|
|
34
38
|
_inherits(DPGraph, _GraphCore);
|
|
35
39
|
var _super = _createSuper(DPGraph);
|
|
@@ -40,13 +44,16 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
|
|
|
40
44
|
history: true,
|
|
41
45
|
frozen: true,
|
|
42
46
|
grid: true,
|
|
47
|
+
snapline: true,
|
|
43
48
|
selecting: {
|
|
44
49
|
enabled: true,
|
|
45
50
|
rubberband: false,
|
|
46
|
-
multiple:
|
|
47
|
-
strict:
|
|
48
|
-
showNodeSelectionBox:
|
|
49
|
-
|
|
51
|
+
multiple: false,
|
|
52
|
+
strict: false,
|
|
53
|
+
showNodeSelectionBox: true,
|
|
54
|
+
showEdgeSelectionBox: true,
|
|
55
|
+
selectNodeOnMoved: false,
|
|
56
|
+
multipleSelectionModifiers: 'ctrl'
|
|
50
57
|
},
|
|
51
58
|
keyboard: {
|
|
52
59
|
enabled: true
|
|
@@ -129,6 +136,10 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
|
|
|
129
136
|
pageBreak: false,
|
|
130
137
|
pannable: true
|
|
131
138
|
},
|
|
139
|
+
clipboard: {
|
|
140
|
+
enabled: true,
|
|
141
|
+
useLocalStorage: true
|
|
142
|
+
},
|
|
132
143
|
highlighting: {
|
|
133
144
|
nodeAvailable: {
|
|
134
145
|
name: 'className',
|
|
@@ -720,6 +731,76 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
|
|
|
720
731
|
value: function onContextMenu(data) {
|
|
721
732
|
this.factory$.contextMenuInfo.next(data);
|
|
722
733
|
}
|
|
734
|
+
}, {
|
|
735
|
+
key: "onAddCopyCells",
|
|
736
|
+
value: function onAddCopyCells(nodes, edges) {
|
|
737
|
+
var _this2 = this;
|
|
738
|
+
var cells = [];
|
|
739
|
+
var randomId = guid().substring(0, 4);
|
|
740
|
+
nodes.map(function (cell) {
|
|
741
|
+
var _node = cell.getData();
|
|
742
|
+
_node = _objectSpread(_objectSpread({}, _node), {}, {
|
|
743
|
+
id: "".concat(_node.id, "_copy_").concat(randomId),
|
|
744
|
+
x: _node.x + 30,
|
|
745
|
+
y: _node.y + 30
|
|
746
|
+
});
|
|
747
|
+
_this2.updateDPGraph([_node]);
|
|
748
|
+
var newNode = formatNodeInfoToNodeMeta(_node);
|
|
749
|
+
_this2.addNode(newNode);
|
|
750
|
+
});
|
|
751
|
+
edges.map(function (cell) {
|
|
752
|
+
var _edge = cell.getData();
|
|
753
|
+
_edge = _objectSpread(_objectSpread({}, _edge), {}, {
|
|
754
|
+
source: "".concat(_edge.source, "_copy_").concat(randomId),
|
|
755
|
+
target: "".concat(_edge.target, "_copy_").concat(randomId)
|
|
756
|
+
});
|
|
757
|
+
_this2.updateDPGraph([], [_edge]);
|
|
758
|
+
var newEdge = formattedEdgesToEdgeMeta(_edge);
|
|
759
|
+
_this2.addEdge(newEdge);
|
|
760
|
+
});
|
|
761
|
+
cleanClipboard();
|
|
762
|
+
// 回显选中复制的之后的节点
|
|
763
|
+
nodes.map(function (cell) {
|
|
764
|
+
var _this2$graph;
|
|
765
|
+
var _node = cell.getData();
|
|
766
|
+
var _cell = (_this2$graph = _this2.graph) === null || _this2$graph === void 0 ? void 0 : _this2$graph.getCellById("".concat(_node.id, "_copy_").concat(randomId));
|
|
767
|
+
cells.push(_cell);
|
|
768
|
+
});
|
|
769
|
+
this.graph.cleanSelection();
|
|
770
|
+
this.graph.select(cells);
|
|
771
|
+
}
|
|
772
|
+
}, {
|
|
773
|
+
key: "onCopyNodes",
|
|
774
|
+
value: function onCopyNodes(args) {
|
|
775
|
+
var _args11 = _slicedToArray(args, 2),
|
|
776
|
+
action = _args11[1];
|
|
777
|
+
var selectedCells = this.graph.getSelectedCells();
|
|
778
|
+
switch (action) {
|
|
779
|
+
case 'command+c':
|
|
780
|
+
case 'ctrl+c':
|
|
781
|
+
if (selectedCells && selectedCells.length > 0) {
|
|
782
|
+
copy(selectedCells, this.graph);
|
|
783
|
+
}
|
|
784
|
+
break;
|
|
785
|
+
case 'command+v':
|
|
786
|
+
case 'ctrl+v':
|
|
787
|
+
if (isClipboardEmpty()) {
|
|
788
|
+
_message.info(tr('剪切板为空,不可粘贴'));
|
|
789
|
+
} else {
|
|
790
|
+
var clipboardCells = this.graph.getCellsInClipboard();
|
|
791
|
+
var selectedNodes = clipboardCells.filter(function (cell) {
|
|
792
|
+
return cell.isNode();
|
|
793
|
+
});
|
|
794
|
+
var selectedEdges = clipboardCells.filter(function (cell) {
|
|
795
|
+
return cell.isEdge();
|
|
796
|
+
});
|
|
797
|
+
this.onAddCopyCells(selectedNodes, selectedEdges);
|
|
798
|
+
_message.success(tr('粘贴成功'));
|
|
799
|
+
}
|
|
800
|
+
break;
|
|
801
|
+
default:
|
|
802
|
+
}
|
|
803
|
+
}
|
|
723
804
|
// 通过id更新名称
|
|
724
805
|
}, {
|
|
725
806
|
key: "updateNodeNameById",
|
|
@@ -751,7 +832,7 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
|
|
|
751
832
|
key: "onMoveNodes",
|
|
752
833
|
value: function () {
|
|
753
834
|
var _onMoveNodes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(movedNodes) {
|
|
754
|
-
var
|
|
835
|
+
var _this3 = this;
|
|
755
836
|
var targetNodes, newPos, oldGraph, newGraph;
|
|
756
837
|
return _regeneratorRuntime.wrap(function _callee11$(_context11) {
|
|
757
838
|
while (1) switch (_context11.prev = _context11.next) {
|
|
@@ -767,7 +848,7 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
|
|
|
767
848
|
var x = current.x,
|
|
768
849
|
y = current.y;
|
|
769
850
|
var id = node.id;
|
|
770
|
-
|
|
851
|
+
_this3.updateNodeById(id, function (node) {
|
|
771
852
|
node.setData({
|
|
772
853
|
x: x,
|
|
773
854
|
y: y
|
|
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
|
3
3
|
/*
|
|
4
4
|
* @Author: wangxian
|
|
5
5
|
* @Date: 2022-05-16 18:53:31
|
|
6
|
-
* @LastEditTime: 2023-
|
|
6
|
+
* @LastEditTime: 2023-11-30 10:25:51
|
|
7
7
|
*/
|
|
8
8
|
import React from 'react';
|
|
9
9
|
import { filter } from 'rxjs';
|
|
@@ -18,6 +18,7 @@ import ContextMenu from './comps/ContextMenu';
|
|
|
18
18
|
import { GraphHandler } from './comps/GraphHandler';
|
|
19
19
|
var DynamicPorts = function DynamicPorts(props) {
|
|
20
20
|
var defaultValue = props.defaultValue,
|
|
21
|
+
isSelection = props.isSelection,
|
|
21
22
|
_props$dispose = props.dispose,
|
|
22
23
|
dispose = _props$dispose === void 0 ? true : _props$dispose,
|
|
23
24
|
isUpdateNodeName = props.isUpdateNodeName,
|
|
@@ -82,6 +83,12 @@ var DynamicPorts = function DynamicPorts(props) {
|
|
|
82
83
|
firstLoadRef.current = false;
|
|
83
84
|
}
|
|
84
85
|
}, [defaultValue]);
|
|
86
|
+
React.useEffect(function () {
|
|
87
|
+
if (isSelection && dpGraph) {
|
|
88
|
+
var _dpGraphRef$current3, _dpGraphRef$current3$;
|
|
89
|
+
dpGraphRef.current.isGraphReady() && ((_dpGraphRef$current3 = dpGraphRef.current) === null || _dpGraphRef$current3 === void 0 ? void 0 : (_dpGraphRef$current3$ = _dpGraphRef$current3.graph) === null || _dpGraphRef$current3$ === void 0 ? void 0 : _dpGraphRef$current3$.enableMultipleSelection());
|
|
90
|
+
}
|
|
91
|
+
}, [isSelection, dpGraph]);
|
|
85
92
|
React.useEffect(function () {
|
|
86
93
|
if (dpGraph) {
|
|
87
94
|
dpGraphRef.current.factory$.isUpdateNodeName.next(isUpdateNodeName);
|
|
@@ -130,6 +137,9 @@ var DynamicPorts = function DynamicPorts(props) {
|
|
|
130
137
|
case 'real':
|
|
131
138
|
dpGraphRef.current.zoomGraphRealSize();
|
|
132
139
|
break;
|
|
140
|
+
case 'selection':
|
|
141
|
+
dpGraphRef.current.toggleSelectionEnabled();
|
|
142
|
+
break;
|
|
133
143
|
default:
|
|
134
144
|
}
|
|
135
145
|
}
|
|
@@ -151,7 +161,8 @@ var DynamicPorts = function DynamicPorts(props) {
|
|
|
151
161
|
onZoomIn: onHandleSideToolbar('in'),
|
|
152
162
|
onZoomOut: onHandleSideToolbar('out'),
|
|
153
163
|
onFitContent: onHandleSideToolbar('fit'),
|
|
154
|
-
onRealContent: onHandleSideToolbar('real')
|
|
164
|
+
onRealContent: onHandleSideToolbar('real'),
|
|
165
|
+
onToggleSelectionEnabled: isSelection ? onHandleSideToolbar('selection') : undefined
|
|
155
166
|
}), /*#__PURE__*/React.createElement("div", {
|
|
156
167
|
style: {
|
|
157
168
|
height: '100%',
|
|
@@ -39,6 +39,42 @@ export declare function formatNodeInfoToNodeMeta(nodeData: NDPGraph.Node, inputP
|
|
|
39
39
|
outPorts: NDPGraph.OutPort[];
|
|
40
40
|
param?: NDPGraph.Param;
|
|
41
41
|
};
|
|
42
|
+
export declare function formattedEdgesToEdgeMeta(edge: NDPGraph.Edge): {
|
|
43
|
+
data: {
|
|
44
|
+
source: string;
|
|
45
|
+
target: string;
|
|
46
|
+
outPortId: string;
|
|
47
|
+
inPortId: string;
|
|
48
|
+
color?: string;
|
|
49
|
+
};
|
|
50
|
+
sourceAnchor: string;
|
|
51
|
+
source: {
|
|
52
|
+
cell: string;
|
|
53
|
+
port: string;
|
|
54
|
+
anchor: {
|
|
55
|
+
name: string;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
target: {
|
|
59
|
+
cell: string;
|
|
60
|
+
port: string;
|
|
61
|
+
anchor: {
|
|
62
|
+
name: string;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
label: string;
|
|
66
|
+
zIndex: number;
|
|
67
|
+
attrs: {
|
|
68
|
+
line: {
|
|
69
|
+
strokeDasharray: string;
|
|
70
|
+
targetMarker: string;
|
|
71
|
+
stroke: string;
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
outPortId: string;
|
|
75
|
+
inPortId: string;
|
|
76
|
+
color?: string;
|
|
77
|
+
};
|
|
42
78
|
/**
|
|
43
79
|
* 将暴露给接口的图信息转换可渲染的结图结构信息
|
|
44
80
|
* @returns
|
|
@@ -111,3 +147,7 @@ export declare function formatGraphData(graphData: NDPGraph.GraphData): {
|
|
|
111
147
|
color?: string;
|
|
112
148
|
}[];
|
|
113
149
|
};
|
|
150
|
+
export declare function isClipboardEmpty(): boolean;
|
|
151
|
+
export declare function getCellsInClipboard(): unknown;
|
|
152
|
+
export declare function cleanClipboard(): void;
|
|
153
|
+
export declare function copy(selectedCells: any, graph: Graph): void;
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
+
import "antd/es/message/style";
|
|
2
|
+
import _message from "antd/es/message";
|
|
1
3
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
4
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
5
|
/*
|
|
4
6
|
* @Author: wangxian
|
|
5
7
|
* @Date: 2022-05-24 16:40:49
|
|
6
|
-
* @LastEditTime: 2023-
|
|
8
|
+
* @LastEditTime: 2023-12-05 09:56:52
|
|
7
9
|
*/
|
|
8
10
|
import { sortBy } from 'lodash-es';
|
|
9
11
|
import { NODE_HEIGHT, NODE_WIDTH } from './constant';
|
|
12
|
+
import { delFromLS, getFromLS, saveToLS } from '../../utils';
|
|
13
|
+
import { tr } from '../../framework/locale';
|
|
10
14
|
// 将画布上的点转换成相对于 offset parent 的点
|
|
11
15
|
export function graphPointToOffsetPoint(graph, graphPoint, containerElem) {
|
|
12
16
|
if (graph) {
|
|
@@ -73,6 +77,40 @@ export function formatNodeInfoToNodeMeta(nodeData) {
|
|
|
73
77
|
zIndex: 10
|
|
74
78
|
});
|
|
75
79
|
}
|
|
80
|
+
export function formattedEdgesToEdgeMeta(edge) {
|
|
81
|
+
var source = edge.source,
|
|
82
|
+
outPortId = edge.outPortId,
|
|
83
|
+
target = edge.target,
|
|
84
|
+
inPortId = edge.inPortId,
|
|
85
|
+
color = edge.color;
|
|
86
|
+
return _objectSpread(_objectSpread({}, edge), {}, {
|
|
87
|
+
data: _objectSpread({}, edge),
|
|
88
|
+
sourceAnchor: 'bottom',
|
|
89
|
+
source: {
|
|
90
|
+
cell: source.toString(),
|
|
91
|
+
port: outPortId.toString(),
|
|
92
|
+
anchor: {
|
|
93
|
+
name: 'bottom'
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
target: {
|
|
97
|
+
cell: target.toString(),
|
|
98
|
+
port: inPortId.toString(),
|
|
99
|
+
anchor: {
|
|
100
|
+
name: 'center'
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
label: '',
|
|
104
|
+
zIndex: 9,
|
|
105
|
+
attrs: {
|
|
106
|
+
line: {
|
|
107
|
+
strokeDasharray: '',
|
|
108
|
+
targetMarker: '',
|
|
109
|
+
stroke: color || '#808080'
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
}
|
|
76
114
|
/**
|
|
77
115
|
* 将暴露给接口的图信息转换可渲染的结图结构信息
|
|
78
116
|
* @returns
|
|
@@ -84,38 +122,7 @@ export function formatGraphData(graphData) {
|
|
|
84
122
|
edges = _graphData$edges === void 0 ? [] : _graphData$edges;
|
|
85
123
|
// 格式化边
|
|
86
124
|
var formattedEdges = edges.map(function (edge) {
|
|
87
|
-
|
|
88
|
-
outPortId = edge.outPortId,
|
|
89
|
-
target = edge.target,
|
|
90
|
-
inPortId = edge.inPortId,
|
|
91
|
-
color = edge.color;
|
|
92
|
-
return _objectSpread(_objectSpread({}, edge), {}, {
|
|
93
|
-
data: _objectSpread({}, edge),
|
|
94
|
-
sourceAnchor: 'bottom',
|
|
95
|
-
source: {
|
|
96
|
-
cell: source.toString(),
|
|
97
|
-
port: outPortId.toString(),
|
|
98
|
-
anchor: {
|
|
99
|
-
name: 'bottom'
|
|
100
|
-
}
|
|
101
|
-
},
|
|
102
|
-
target: {
|
|
103
|
-
cell: target.toString(),
|
|
104
|
-
port: inPortId.toString(),
|
|
105
|
-
anchor: {
|
|
106
|
-
name: 'center'
|
|
107
|
-
}
|
|
108
|
-
},
|
|
109
|
-
label: '',
|
|
110
|
-
zIndex: 1,
|
|
111
|
-
attrs: {
|
|
112
|
-
line: {
|
|
113
|
-
strokeDasharray: '',
|
|
114
|
-
targetMarker: '',
|
|
115
|
-
stroke: color || '#808080'
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
});
|
|
125
|
+
return formattedEdgesToEdgeMeta(edge);
|
|
119
126
|
});
|
|
120
127
|
// 记录所有已连线的输入桩
|
|
121
128
|
var inputPortConnectedMap = formattedEdges.reduce(function (acc, edge) {
|
|
@@ -131,4 +138,28 @@ export function formatGraphData(graphData) {
|
|
|
131
138
|
nodes: _toConsumableArray(formattedNodes),
|
|
132
139
|
edges: formattedEdges
|
|
133
140
|
};
|
|
141
|
+
}
|
|
142
|
+
var CLIPBOARD_KEY = 'x6.clipboard.cells';
|
|
143
|
+
var CLIPBOARD_KEY_NEW = 'my.clipboard.cells';
|
|
144
|
+
export function isClipboardEmpty() {
|
|
145
|
+
var cells = getFromLS(CLIPBOARD_KEY_NEW);
|
|
146
|
+
return cells ? false : true;
|
|
147
|
+
}
|
|
148
|
+
export function getCellsInClipboard() {
|
|
149
|
+
var cells = getFromLS(CLIPBOARD_KEY_NEW);
|
|
150
|
+
return cells;
|
|
151
|
+
}
|
|
152
|
+
export function cleanClipboard() {
|
|
153
|
+
delFromLS(CLIPBOARD_KEY_NEW);
|
|
154
|
+
}
|
|
155
|
+
export function copy(selectedCells, graph) {
|
|
156
|
+
graph.copy(selectedCells, {
|
|
157
|
+
useLocalStorage: true
|
|
158
|
+
});
|
|
159
|
+
var cells = getFromLS(CLIPBOARD_KEY);
|
|
160
|
+
if (cells) {
|
|
161
|
+
saveToLS(CLIPBOARD_KEY_NEW, cells);
|
|
162
|
+
delFromLS(CLIPBOARD_KEY);
|
|
163
|
+
_message.success(tr('复制成功'));
|
|
164
|
+
}
|
|
134
165
|
}
|
|
@@ -5,7 +5,7 @@ import _Input from "antd/es/input";
|
|
|
5
5
|
/*
|
|
6
6
|
* @Author: wangxian
|
|
7
7
|
* @Date: 2022-03-04 14:53:50
|
|
8
|
-
* @LastEditTime:
|
|
8
|
+
* @LastEditTime: 2023-12-04 14:28:37
|
|
9
9
|
*/
|
|
10
10
|
import React from 'react';
|
|
11
11
|
import { EditableContext } from '../interface';
|
|
@@ -38,6 +38,7 @@ function Index(props) {
|
|
|
38
38
|
}
|
|
39
39
|
}, /*#__PURE__*/React.createElement(_Input, {
|
|
40
40
|
ref: inputRef,
|
|
41
|
+
title: props === null || props === void 0 ? void 0 : props.record[dataIndex],
|
|
41
42
|
size: "small",
|
|
42
43
|
disabled: editConfig.type === 'edit' ? disabled : false
|
|
43
44
|
}));
|
|
@@ -49,8 +49,10 @@ export declare class GraphCore<N extends Node<Node.Properties> = Node<Node.Prope
|
|
|
49
49
|
validateContextMenu(data: ContextMenuInfo): boolean;
|
|
50
50
|
onContextMenu(data: ContextMenuInfo): any;
|
|
51
51
|
zoom: (factor: number | 'fit' | 'real') => void;
|
|
52
|
+
toggleSelectionEnabled: (enabled?: boolean) => void;
|
|
52
53
|
onMoveNodeStart(args: any): void;
|
|
53
54
|
onMoveNodes(args: any[]): void;
|
|
55
|
+
onCopyNodes(args: any[]): void;
|
|
54
56
|
addNode: (nodeMeta: any) => N;
|
|
55
57
|
getNodes: () => N[];
|
|
56
58
|
addEdge: (edgeMeta: any) => E;
|
|
@@ -6,7 +6,7 @@ var _excluded = ["wrapper", "container", "nodes", "edges"];
|
|
|
6
6
|
/*
|
|
7
7
|
* @Author: wangxian
|
|
8
8
|
* @Date: 2022-05-24 13:55:44
|
|
9
|
-
* @LastEditTime: 2023-
|
|
9
|
+
* @LastEditTime: 2023-11-30 14:12:37
|
|
10
10
|
*/
|
|
11
11
|
import { Graph } from '@antv/x6';
|
|
12
12
|
import { debounceTime, fromEventPattern, map, merge, scan, tap } from 'rxjs';
|
|
@@ -52,6 +52,20 @@ export var GraphCore = /*#__PURE__*/function () {
|
|
|
52
52
|
(_this$graph4 = _this.graph) === null || _this$graph4 === void 0 ? void 0 : _this$graph4.centerContent();
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
|
+
// 切换可框选模式
|
|
56
|
+
this.toggleSelectionEnabled = function (enabled) {
|
|
57
|
+
var graph = _this.graph;
|
|
58
|
+
if (graph) {
|
|
59
|
+
var needEnableRubberBand = typeof enabled === 'undefined' ? !graph.isRubberbandEnabled() : enabled;
|
|
60
|
+
if (needEnableRubberBand) {
|
|
61
|
+
graph.enableRubberband();
|
|
62
|
+
graph.disablePanning();
|
|
63
|
+
} else {
|
|
64
|
+
graph.disableRubberband();
|
|
65
|
+
graph.enablePanning();
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
};
|
|
55
69
|
/* 以下为主动触发的方法 */
|
|
56
70
|
this.addNode = function (nodeMeta) {
|
|
57
71
|
var _this$nodeMetas;
|
|
@@ -324,6 +338,14 @@ export var GraphCore = /*#__PURE__*/function () {
|
|
|
324
338
|
})).subscribe(function (movedNodes) {
|
|
325
339
|
_this2.onMoveNodes(movedNodes);
|
|
326
340
|
});
|
|
341
|
+
// 处理节点复制事件
|
|
342
|
+
this.factorySub.copyNode = fromEventPattern(function (handler) {
|
|
343
|
+
_this2.graph.bindKey(['command+c', 'ctrl+c', 'command+v', 'ctrl+v'], handler);
|
|
344
|
+
}, function () {
|
|
345
|
+
_this2.graph.unbindKey(['command+c', 'ctrl+c', 'command+v', 'ctrl+v']);
|
|
346
|
+
}).subscribe(function (args) {
|
|
347
|
+
_this2.onCopyNodes(args);
|
|
348
|
+
});
|
|
327
349
|
}
|
|
328
350
|
// 渲染
|
|
329
351
|
}, {
|
|
@@ -340,8 +362,7 @@ export var GraphCore = /*#__PURE__*/function () {
|
|
|
340
362
|
var height = wrapper.clientHeight;
|
|
341
363
|
var graph = new Graph(_objectSpread(_objectSpread({}, options), {}, {
|
|
342
364
|
width: width,
|
|
343
|
-
height: height
|
|
344
|
-
snapline: true
|
|
365
|
+
height: height
|
|
345
366
|
}));
|
|
346
367
|
this.graph = graph;
|
|
347
368
|
nodeMetas.forEach(function (nodeMeta) {
|
|
@@ -424,15 +445,21 @@ export var GraphCore = /*#__PURE__*/function () {
|
|
|
424
445
|
value: function onMoveNodes(args) {
|
|
425
446
|
if (process.env.NODE_ENV === 'development') {}
|
|
426
447
|
}
|
|
448
|
+
}, {
|
|
449
|
+
key: "onCopyNodes",
|
|
450
|
+
value: function onCopyNodes(args) {
|
|
451
|
+
if (process.env.NODE_ENV === 'development') {}
|
|
452
|
+
}
|
|
427
453
|
}, {
|
|
428
454
|
key: "dispose",
|
|
429
455
|
value:
|
|
430
456
|
// 注销
|
|
431
457
|
function dispose() {
|
|
432
|
-
var _this$factorySub$conn, _this$factorySub$move, _this$factorySub$sele;
|
|
458
|
+
var _this$factorySub$conn, _this$factorySub$move, _this$factorySub$sele, _this$factorySub$copy;
|
|
433
459
|
(_this$factorySub$conn = this.factorySub.connectNode) === null || _this$factorySub$conn === void 0 ? void 0 : _this$factorySub$conn.unsubscribe();
|
|
434
460
|
(_this$factorySub$move = this.factorySub.moveNodes) === null || _this$factorySub$move === void 0 ? void 0 : _this$factorySub$move.unsubscribe();
|
|
435
461
|
(_this$factorySub$sele = this.factorySub.selectNode) === null || _this$factorySub$sele === void 0 ? void 0 : _this$factorySub$sele.unsubscribe();
|
|
462
|
+
(_this$factorySub$copy = this.factorySub.copyNode) === null || _this$factorySub$copy === void 0 ? void 0 : _this$factorySub$copy.unsubscribe();
|
|
436
463
|
// ! 这一步要注意放在图的事件订阅都取消了之后
|
|
437
464
|
if (this.wrapper) {
|
|
438
465
|
var _this$graph11;
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
height: 100%;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.x6-widget-selection-inner {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
6
|
+
// .x6-widget-selection-inner {
|
|
7
|
+
// border: none !important;
|
|
8
|
+
// box-shadow: none !important;
|
|
9
|
+
// }
|
|
10
10
|
|
|
11
11
|
.x6-widget-selection-box {
|
|
12
12
|
border: none !important;
|
package/es/utils.d.ts
CHANGED
|
@@ -30,3 +30,6 @@ export declare function getConstantValue(array: any[], key: string | number, str
|
|
|
30
30
|
* @param fileName string
|
|
31
31
|
*/
|
|
32
32
|
export declare function handleMd2Doc(mdText: string, fileName: string, isFirstLineCenter?: boolean): Promise<void>;
|
|
33
|
+
export declare function getFromLS<T>(key: string): T | null;
|
|
34
|
+
export declare function saveToLS<T>(key: string, value: T | null | undefined): void;
|
|
35
|
+
export declare function delFromLS(key: string): void;
|
package/es/utils.js
CHANGED
|
@@ -6,7 +6,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
|
6
6
|
/*
|
|
7
7
|
* @Author: wangxian
|
|
8
8
|
* @Date: 2021-09-18 14:15:04
|
|
9
|
-
* @LastEditTime: 2023-
|
|
9
|
+
* @LastEditTime: 2023-12-05 09:05:07
|
|
10
10
|
*/
|
|
11
11
|
import saveAs from 'file-saver';
|
|
12
12
|
import { asBlob } from 'html-docx-js-typescript';
|
|
@@ -283,4 +283,26 @@ function convertImagePathToBase64(imagePath) {
|
|
|
283
283
|
|
|
284
284
|
return uint8Array;
|
|
285
285
|
}
|
|
286
|
+
}
|
|
287
|
+
export function getFromLS(key) {
|
|
288
|
+
if (window.localStorage) {
|
|
289
|
+
try {
|
|
290
|
+
return JSON.parse(window.localStorage.getItem(key) || '');
|
|
291
|
+
} catch (e) {
|
|
292
|
+
/*Ignore*/
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
return null;
|
|
296
|
+
}
|
|
297
|
+
export function saveToLS(key, value) {
|
|
298
|
+
if (window.localStorage) {
|
|
299
|
+
if (value === null || value === undefined) {
|
|
300
|
+
window.localStorage.removeItem(key);
|
|
301
|
+
} else {
|
|
302
|
+
window.localStorage.setItem(key, JSON.stringify(value));
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
export function delFromLS(key) {
|
|
307
|
+
window.localStorage.removeItem(key);
|
|
286
308
|
}
|