ronds-metadata 1.3.24 → 1.3.26
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
}
|