@riil-frontend/component-topology 12.0.0-dev.8 → 12.1.0-dev.1

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.
Files changed (98) hide show
  1. package/build/1.js +1 -1
  2. package/build/index.css +1 -1
  3. package/build/index.js +14 -14
  4. package/es/components/TemplateButton/index.module.scss +1 -1
  5. package/es/core/components/AlarmListPanel/components/AlarmListItem.js +58 -3
  6. package/es/core/components/TopoView/topoView.js +5 -1
  7. package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +5 -12
  8. package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +27 -10
  9. package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss +21 -1
  10. package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +9 -0
  11. package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js +2 -2
  12. package/es/core/editor/components/Toolbar/widgets/Layout/index.js +16 -2
  13. package/es/core/editor/hooks/useKeyboardShortcut.js +3 -1
  14. package/es/core/editor/utils/copyElementUtil.js +12 -0
  15. package/es/core/editor/utils/edgeTypeStyleUtil.js +8 -30
  16. package/es/core/hooks/useAlarm.js +131 -81
  17. package/es/core/hooks/useCmpLinkAlarm.js +153 -0
  18. package/es/core/hooks/useEventData.js +1 -2
  19. package/es/core/hooks/useGraphAlarmDisplay.js +91 -56
  20. package/es/core/hooks/useResourceConfig.js +1 -3
  21. package/es/core/hooks/useTopoEdit.js +51 -58
  22. package/es/core/models/Alarm.js +69 -142
  23. package/es/core/models/AttributeMetricDisplay.js +14 -5
  24. package/es/core/models/TopoApp.js +1 -1
  25. package/es/core/models/cache/CiCache.d.ts +1 -1
  26. package/es/core/models/cache/CiCache.js +3 -3
  27. package/es/core/models/cache/CiTypeCache.js +4 -0
  28. package/es/core/models/topoData.js +0 -1
  29. package/es/core/models/utils/linkUtils.js +20 -13
  30. package/es/core/services/index.js +1 -1
  31. package/es/core/services/topo/basic.js +2 -2
  32. package/es/core/store/models/topoConfig.js +7 -10
  33. package/es/core/store/models/topoMod.js +81 -134
  34. package/es/core/utils/edgeUtil.js +8 -0
  35. package/es/core/utils/metricUtil.js +8 -4
  36. package/es/core/utils/showGraphManageStatusUtil.js +3 -2
  37. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +12 -13
  38. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +2 -2
  39. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useAlarmAndRiskData.js +20 -18
  40. package/es/core/viewer/components/plugins/ViewerPlugin.js +3 -1
  41. package/es/core/viewer/components/titlebar/widgets/AlarmButton.js +1 -5
  42. package/es/networkTopo/components/TopoView.js +6 -11
  43. package/es/networkTopo/hooks/useEdgeExpand.js +2 -3
  44. package/es/networkTopo/services/topo/basic.js +3 -3
  45. package/es/networkTopo/store/topoCenter.js +260 -223
  46. package/es/style.js +1 -1
  47. package/es/utils/ResourceConfigUtil.js +3 -36
  48. package/es/utils/ciRefAttributeTranslateUtil.d.ts +19 -0
  49. package/es/utils/ciRefAttributeTranslateUtil.js +155 -0
  50. package/es/utils/topoData.js +4 -2
  51. package/lib/components/TemplateButton/index.module.scss +1 -1
  52. package/lib/core/components/AlarmListPanel/components/AlarmListItem.js +60 -3
  53. package/lib/core/components/TopoView/topoView.js +5 -1
  54. package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +6 -12
  55. package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +27 -9
  56. package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss +21 -1
  57. package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +8 -0
  58. package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js +1 -1
  59. package/lib/core/editor/components/Toolbar/widgets/Layout/index.js +16 -2
  60. package/lib/core/editor/hooks/useKeyboardShortcut.js +2 -0
  61. package/lib/core/editor/utils/copyElementUtil.js +15 -0
  62. package/lib/core/editor/utils/edgeTypeStyleUtil.js +8 -31
  63. package/lib/core/hooks/useAlarm.js +130 -79
  64. package/lib/core/hooks/useCmpLinkAlarm.js +166 -0
  65. package/lib/core/hooks/useEventData.js +1 -2
  66. package/lib/core/hooks/useGraphAlarmDisplay.js +91 -55
  67. package/lib/core/hooks/useResourceConfig.js +1 -3
  68. package/lib/core/hooks/useTopoEdit.js +50 -57
  69. package/lib/core/models/Alarm.js +69 -144
  70. package/lib/core/models/AttributeMetricDisplay.js +16 -4
  71. package/lib/core/models/TopoApp.js +1 -1
  72. package/lib/core/models/cache/CiCache.d.ts +1 -1
  73. package/lib/core/models/cache/CiCache.js +3 -3
  74. package/lib/core/models/cache/CiTypeCache.js +4 -0
  75. package/lib/core/models/topoData.js +0 -1
  76. package/lib/core/models/utils/linkUtils.js +21 -13
  77. package/lib/core/services/index.js +1 -1
  78. package/lib/core/services/topo/basic.js +2 -2
  79. package/lib/core/store/models/topoConfig.js +7 -10
  80. package/lib/core/store/models/topoMod.js +81 -134
  81. package/lib/core/utils/edgeUtil.js +10 -0
  82. package/lib/core/utils/metricUtil.js +8 -4
  83. package/lib/core/utils/showGraphManageStatusUtil.js +3 -2
  84. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +12 -13
  85. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +2 -2
  86. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useAlarmAndRiskData.js +20 -18
  87. package/lib/core/viewer/components/plugins/ViewerPlugin.js +3 -1
  88. package/lib/core/viewer/components/titlebar/widgets/AlarmButton.js +1 -5
  89. package/lib/networkTopo/components/TopoView.js +5 -14
  90. package/lib/networkTopo/hooks/useEdgeExpand.js +2 -3
  91. package/lib/networkTopo/services/topo/basic.js +3 -3
  92. package/lib/networkTopo/store/topoCenter.js +262 -225
  93. package/lib/style.js +1 -1
  94. package/lib/utils/ResourceConfigUtil.js +3 -38
  95. package/lib/utils/ciRefAttributeTranslateUtil.d.ts +19 -0
  96. package/lib/utils/ciRefAttributeTranslateUtil.js +168 -0
  97. package/lib/utils/topoData.js +4 -2
  98. package/package.json +3 -3
@@ -26,7 +26,7 @@
26
26
  line-height: 20px;
27
27
  font-size: 18px;
28
28
  margin-top: 14px;
29
- color: $color-text1-3;
29
+ color: $color-text1-4;
30
30
  outline: none;
31
31
  }
32
32
 
@@ -1,3 +1,5 @@
1
+ import _Balloon from "@alifd/next/es/balloon";
2
+ import _extends from "@babel/runtime/helpers/extends";
1
3
  import _List from "@alifd/next/es/list";
2
4
  import _Icon from "@alifd/next/es/icon";
3
5
  import React, { useState, useEffect } from 'react';
@@ -31,6 +33,7 @@ function AlarmListItem(props) {
31
33
  var topo = props.topo,
32
34
  alarmInfo = props.alarmInfo,
33
35
  onClick = props.onClick;
36
+ console.log("AlarmListPanel", topo, alarmInfo);
34
37
  return /*#__PURE__*/React.createElement(_List.Item, {
35
38
  className: styles.AlarmListItem,
36
39
  media: /*#__PURE__*/React.createElement(_Icon, {
@@ -85,10 +88,62 @@ function RiskListItem(props) {
85
88
  }, "\u67E5\u770B\u8BE6\u60C5"))));
86
89
  }
87
90
 
91
+ function SubListItem(props) {
92
+ // 传入参数
93
+ var topo = props.topo,
94
+ alarmInfo = props.alarmInfo,
95
+ onClick = props.onClick;
96
+ var creatAlarmTips = topo.viewProps.creatAlarmTips;
97
+ var subNode = topo.getData().nodes.find(function (node) {
98
+ return node.ciId === alarmInfo.mainCiId;
99
+ });
100
+ var plarm = alarmInfo.cmpCode ? "\u3010" + (subNode === null || subNode === void 0 ? void 0 : subNode.sourceName) + "\u3011" : "【本级平台】";
101
+ return /*#__PURE__*/React.createElement(_List.Item, {
102
+ className: styles.AlarmListItem,
103
+ media: /*#__PURE__*/React.createElement(_Icon, {
104
+ type: "gaojing-3",
105
+ size: "xs",
106
+ className: styles["alarm-color-icon"] + " alarm-color-icon-lv" + alarmInfo.alertLevel
107
+ })
108
+ }, /*#__PURE__*/React.createElement("span", {
109
+ className: styles.content
110
+ }, /*#__PURE__*/React.createElement("div", {
111
+ className: styles.list,
112
+ onClick: function onClick() {
113
+ getNode(topo, alarmInfo);
114
+ }
115
+ }, "" + plarm + alarmInfo.alertObject + alarmInfo.alertTitle), alarmInfo.cmpCode ? /*#__PURE__*/React.createElement(_Balloon, {
116
+ trigger: /*#__PURE__*/React.createElement("span", {
117
+ className: styles.listLink
118
+ }, "\u67E5\u770B\u8BE6\u60C5"),
119
+ closable: true,
120
+ triggerType: "click",
121
+ align: "bl",
122
+ popupClassName: styles["enjoydata-alarm-table-balloon"],
123
+ popupStyle: {
124
+ maxWidth: "700px",
125
+ width: 530
126
+ }
127
+ }, creatAlarmTips(_extends({}, alarmInfo, {
128
+ sourceName: plarm
129
+ }))) : /*#__PURE__*/React.createElement("div", {
130
+ className: styles.listLink
131
+ }, /*#__PURE__*/React.createElement(Link, {
132
+ onClick: onClick,
133
+ to: alarmLink(alarmInfo)
134
+ }, "\u67E5\u770B\u8BE6\u60C5"))));
135
+ }
136
+
88
137
  function ListItem(props) {
89
- var alarmInfo = props.alarmInfo;
90
- var ListItemWidget = alarmInfo.eventType === 'risk' ? RiskListItem : AlarmListItem;
91
- return /*#__PURE__*/React.createElement(ListItemWidget, props);
138
+ var topo = props.topo,
139
+ alarmInfo = props.alarmInfo;
140
+
141
+ if (topo.isCMPTopo) {
142
+ return /*#__PURE__*/React.createElement(SubListItem, props);
143
+ } else {
144
+ var ListItemWidget = alarmInfo.eventType === "risk" ? RiskListItem : AlarmListItem;
145
+ return /*#__PURE__*/React.createElement(ListItemWidget, props);
146
+ }
92
147
  }
93
148
 
94
149
  export default ListItem;
@@ -161,7 +161,11 @@ var Topology = function Topology(props) {
161
161
 
162
162
  if (initSelectionId) {
163
163
  var ele = topo.getHtTopo().getGraphView().dm().getDataByTag(initSelectionId);
164
- topo.getHtTopo().getGraphView().sm().setSelection([ele]);
164
+
165
+ if (ele) {
166
+ topo.getHtTopo().getGraphView().sm().setSelection([ele]);
167
+ }
168
+
165
169
  var selectionDispatchers = topo.store.getModelDispatchers('selection');
166
170
  selectionDispatchers.update({
167
171
  initSelectionId: null
@@ -1,6 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useEffect, useState } from 'react';
3
3
  import { getEdgesBySelection } from "../../../../utils/edgeTypeStyleUtil";
4
+ import { isCustomEdge } from "../../../../../utils/edgeUtil";
4
5
  import DropdownButton from "../components/DropdownButton";
5
6
  import WidgetBox from "../WidgetBox";
6
7
  import Content from "./Content";
@@ -36,15 +37,7 @@ function EdgeColorButton(props) {
36
37
  };
37
38
 
38
39
  var getLines = function getLines(list) {
39
- // eslint-disable-next-line prefer-const
40
- var arr = [];
41
- loopEdges(list, function (edge) {
42
- // eslint-disable-next-line eqeqeq
43
- if (edge.getAttrObject().type == 'line') {
44
- arr.push(edge);
45
- }
46
- });
47
- return arr;
40
+ return list.filter(isCustomEdge);
48
41
  };
49
42
 
50
43
  useEffect(function () {
@@ -53,7 +46,7 @@ function EdgeColorButton(props) {
53
46
  var list = getLines(edges);
54
47
  setLineWidth(1); // eslint-disable-next-line eqeqeq
55
48
 
56
- if (selection.length == 1 && selection[0].a('type') == 'line') {
49
+ if (selection.length == 1 && list.length === 1) {
57
50
  setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
58
51
  }
59
52
 
@@ -67,7 +60,7 @@ function EdgeColorButton(props) {
67
60
  var edges = getEdgesBySelection(topo);
68
61
  loopEdges(edges, function (edge) {
69
62
  // eslint-disable-next-line eqeqeq
70
- if (edge.getAttrObject().type == 'line') {
63
+ if (isCustomEdge(edge)) {
71
64
  var color = colors.hex;
72
65
  edge.s('edge.color', color);
73
66
  edge.s('edge.dash.color', color);
@@ -95,7 +88,7 @@ function EdgeColorButton(props) {
95
88
  topo.historyManager.beginTransaction();
96
89
  loopEdges(edges, function (edge) {
97
90
  // eslint-disable-next-line eqeqeq
98
- if (edge.getAttrObject().type == 'line') {
91
+ if (isCustomEdge(edge)) {
99
92
  edge.s('edge.dash.width', width);
100
93
  edge.s('edge.width', width);
101
94
  var style = edge.a('styles') || {};
@@ -1,8 +1,9 @@
1
+ import _Box from "@alifd/next/es/box";
1
2
  import _Field from "@alifd/next/es/field";
2
3
  import _Select from "@alifd/next/es/select";
3
4
  import _Form from "@alifd/next/es/form";
4
5
  import React, { useEffect, useState } from 'react';
5
- import { getEdgesBySelection, loopEdgesAndChildren, isNodeAllEdges } from "../../../../utils/edgeTypeStyleUtil";
6
+ import { getEdgesBySelection, isNodeAllEdges } from "../../../../utils/edgeTypeStyleUtil";
6
7
  import styles from "./EdgeType.module.scss";
7
8
  import LineType from "./LineType";
8
9
  var FormItem = _Form.Item;
@@ -142,12 +143,19 @@ function EdgeType(props) {
142
143
  className: styles.lineBox
143
144
  }, /*#__PURE__*/React.createElement(_Form, {
144
145
  field: field,
145
- inline: true,
146
146
  labelAlign: "top"
147
147
  }, /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement(LineType, {
148
148
  name: "lineButton"
149
- })), /*#__PURE__*/React.createElement(FormItem, {
150
- label: "\u8D77\u70B9"
149
+ })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Box, {
150
+ direction: "row",
151
+ style: {
152
+ gap: 8
153
+ }
154
+ }, /*#__PURE__*/React.createElement(FormItem, {
155
+ label: "\u8D77\u70B9",
156
+ style: {
157
+ margin: 0
158
+ }
151
159
  }, /*#__PURE__*/React.createElement(_Select, {
152
160
  name: "startPoint",
153
161
  placeholder: " ",
@@ -155,7 +163,8 @@ function EdgeType(props) {
155
163
  container: function container(trigger) {
156
164
  return trigger.parentNode;
157
165
  }
158
- }
166
+ },
167
+ className: styles.endPointSelect
159
168
  }, START_TYPE_OPTIONS.map(function (item, index) {
160
169
  return /*#__PURE__*/React.createElement(Option, {
161
170
  value: item.value,
@@ -168,7 +177,10 @@ function EdgeType(props) {
168
177
  className: styles.iconImg
169
178
  }));
170
179
  }))), /*#__PURE__*/React.createElement(FormItem, {
171
- label: "\u7EC8\u70B9"
180
+ label: "\u7EC8\u70B9",
181
+ style: {
182
+ margin: 0
183
+ }
172
184
  }, /*#__PURE__*/React.createElement(_Select, {
173
185
  name: "endPoint",
174
186
  placeholder: " ",
@@ -176,7 +188,8 @@ function EdgeType(props) {
176
188
  container: function container(trigger) {
177
189
  return trigger.parentNode;
178
190
  }
179
- }
191
+ },
192
+ className: styles.endPointSelect
180
193
  }, END_TYPE_OPTIONS.map(function (item, index) {
181
194
  return /*#__PURE__*/React.createElement(Option, {
182
195
  value: item.value,
@@ -189,7 +202,10 @@ function EdgeType(props) {
189
202
  className: styles.iconImg
190
203
  }));
191
204
  }))), /*#__PURE__*/React.createElement(FormItem, {
192
- label: "\u7C7B\u578B"
205
+ label: "\u7C7B\u578B",
206
+ style: {
207
+ margin: 0
208
+ }
193
209
  }, /*#__PURE__*/React.createElement(_Select, {
194
210
  name: "lineMold",
195
211
  popupProps: {
@@ -197,7 +213,8 @@ function EdgeType(props) {
197
213
  return trigger.parentNode;
198
214
  }
199
215
  },
200
- placeholder: " "
216
+ placeholder: " ",
217
+ className: styles.lineMoldSelect
201
218
  }, LINE_MOLD_OPTIONS.map(function (item, index) {
202
219
  return /*#__PURE__*/React.createElement(Option, {
203
220
  value: item.value,
@@ -209,7 +226,7 @@ function EdgeType(props) {
209
226
  alt: "",
210
227
  className: styles.iconImg
211
228
  }));
212
- })))));
229
+ })))))));
213
230
  }
214
231
 
215
232
  EdgeType.defaultProps = {
@@ -1,10 +1,30 @@
1
1
  @import '~@alifd/next/variables.scss';
2
2
 
3
3
  .lineBox{
4
- width: 236px;
5
4
  background: #FFFFFF;
6
5
  border-radius: 4px;
7
6
  margin-bottom: -7px;
7
+
8
+ .endPointSelect {
9
+ min-width: 0;
10
+ width: 64px;
11
+ :global {
12
+ .#{$css-prefix}select-inner {
13
+ min-width:0 !important;
14
+ }
15
+ }
16
+ }
17
+
18
+ .lineMoldSelect {
19
+ min-width: 0;
20
+ width: 88px;
21
+ :global {
22
+ .#{$css-prefix}select-inner {
23
+ min-width:0 !important;
24
+ }
25
+ }
26
+ }
27
+
8
28
  :global {
9
29
  .#{$css-prefix}form-item:first-child{
10
30
  margin-top: 0;
@@ -38,6 +38,15 @@ var LINE_TYPE_OPTIONS = [{
38
38
  // icon: 'topo_linear_icon_pointsline',
39
39
  // },
40
40
  ];
41
+
42
+ if (localStorage.getItem('topo.test.edge.customType') === 'true') {
43
+ LINE_TYPE_OPTIONS.push({
44
+ value: 'points',
45
+ label: '自由线形',
46
+ icon: 'topo_linear_icon_pointsline'
47
+ });
48
+ }
49
+
41
50
  var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
42
51
  var value = props.value,
43
52
  onChange = props.onChange,
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useEffect, useState } from 'react';
3
- import { getEdgesBySelection, setEdgesAndChildren, setEdgesType } from "../../../../utils/edgeTypeStyleUtil";
3
+ import { getEdgesBySelection, setEdgesType, updateEdgesData } from "../../../../utils/edgeTypeStyleUtil";
4
4
  import DropdownButton from "../components/DropdownButton";
5
5
  import WidgetBox from "../WidgetBox";
6
6
  import { EDGE_END_POINT_TYPE_MAP, LINE_MOLD_MAP } from "./constants";
@@ -52,7 +52,7 @@ function EdgeTypeButton(props) {
52
52
  return;
53
53
  }
54
54
 
55
- setEdgesAndChildren(topo, edges, function (edge) {
55
+ updateEdgesData(topo, edges, function (edge) {
56
56
  if (name === 'startPoint') {
57
57
  // 删除设置
58
58
  ['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].forEach(function (iconName) {
@@ -24,6 +24,11 @@ function Layout(props) {
24
24
  selection = _topo$store$useModelS.selection;
25
25
 
26
26
  var setDisabled = function setDisabled(data) {
27
+ if (topoShowType !== 'layers' && selection.length === 1) {
28
+ //中心节点布局,选中一个节点非分层情况下,需要星型和树形布局亮起来
29
+ return data == 'rectangle' || data == 'hierarchical';
30
+ }
31
+
27
32
  if (topoShowType == 'layers' && selection.length == 1 && !isGroup(selection[0])) {
28
33
  return data != 'rectangle';
29
34
  } else {
@@ -41,7 +46,11 @@ function Layout(props) {
41
46
 
42
47
 
43
48
  if (topoShowType != 'layers' && selection.length == 1) {
44
- topo.getHtTopo().layoutInContainer(layouType);
49
+ if (layouType == 'hierarchical') {
50
+ topo.getHtTopo().layoutInContainer(layouType);
51
+ } else {
52
+ topo.getHtTopo().layoutTopoBySelectNode(layouType, selectionElements[0]);
53
+ }
45
54
  } // eslint-disable-next-line eqeqeq
46
55
 
47
56
 
@@ -56,7 +65,7 @@ function Layout(props) {
56
65
  topo.historyManager.beginTransaction();
57
66
  setLayout(v); // eslint-disable-next-line eqeqeq
58
67
 
59
- if (topoShowType != 'layers' && ((_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.className) != 'ht.Node' || topoShowType == 'partition' && selection.length == 1 || topoShowType == 'layers' && selection.length == 1) {
68
+ if (topoShowType != 'layers' && ((_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.className) != 'ht.Node' || topoShowType == 'partition' && selection.length == 1 || topoShowType == 'layers' && selection.length == 1 || topoShowType !== 'layers' && selection.length === 1) {
60
69
  globalLayout(v);
61
70
  }
62
71
 
@@ -135,6 +144,11 @@ function isLayoutEnabled(props) {
135
144
 
136
145
  if (topoShowType !== 'layers' && !selection.length) {
137
146
  return true;
147
+ } //中心节点布局,选中一个节点不是分层的情况下,按钮亮起
148
+
149
+
150
+ if (topoShowType !== 'layers' && selection.length === 1) {
151
+ return true;
138
152
  }
139
153
 
140
154
  return false;
@@ -1,6 +1,6 @@
1
1
  import hotkeys from 'hotkeys-js';
2
2
  import { useEffect } from 'react';
3
- import { handleCopyHotkey, handlePasteHotkey } from "../utils/copyElementUtil";
3
+ import { destroyPasteEventListener, handleCopyHotkey, handlePasteHotkey, initPasteEventListener } from "../utils/copyElementUtil";
4
4
 
5
5
  function initKeyboardShortcuts(props) {
6
6
  var topo = props.topo,
@@ -35,8 +35,10 @@ function unbindKeyboardShortcuts(props) {
35
35
 
36
36
  export default function useKeyboardShortcut(props) {
37
37
  useEffect(function () {
38
+ initPasteEventListener();
38
39
  initKeyboardShortcuts(props);
39
40
  return function () {
41
+ destroyPasteEventListener();
40
42
  unbindKeyboardShortcuts(props);
41
43
  };
42
44
  }, []);
@@ -9,6 +9,18 @@ export function handleCopyHotkey(event, options) {
9
9
  copy(options.topo);
10
10
  }
11
11
  }
12
+ export function initPasteEventListener() {
13
+ document.addEventListener("paste", handlePasteEventListener);
14
+ }
15
+ export function destroyPasteEventListener() {
16
+ document.removeEventListener("paste", handlePasteEventListener);
17
+ }
18
+
19
+ function handlePasteEventListener(e) {
20
+ var clipdata = e.clipboardData || window.clipboardData;
21
+ console.log("主动粘贴", clipdata.getData("text/plain"));
22
+ }
23
+
12
24
  export function handlePasteHotkey(event, options) {
13
25
  var target = event.target || event.srcElement;
14
26
  var tagName = target.tagName;
@@ -1,5 +1,4 @@
1
- import { getEdges } from "../../../utils/htElementUtils";
2
- import { getEdgesBetweenNodes } from "../../../utils/htElementUtils";
1
+ import { getEdges, getEdgesBetweenNodes } from "../../../utils/htElementUtils";
3
2
  var ht = window.ht;
4
3
  export function getEdgesBySelection(topo) {
5
4
  var getChildrenNodeIds = function getChildrenNodeIds(nodes) {
@@ -78,43 +77,22 @@ export function isNodeAllEdges(topo) {
78
77
  });
79
78
  return inEdges;
80
79
  }
81
- /**
82
- * 遍历连线及子连线
83
- * @param {*} topo
84
- * @param {*} edges
85
- * @param {*} operateEdgeFn
86
- */
87
-
88
- export function loopEdgesAndChildren(topo, edges, operateEdgeFn) {
89
- var htTopo = topo.getHtTopo();
90
- edges.forEach(function (edge) {
91
- operateEdgeFn(edge);
92
-
93
- if (edge.isEdgeGroupAgent()) {
94
- // 连线组折叠时同时设置子连线
95
- var edgeChildren = edge.getEdgeGroup().getEdges().toArray();
96
- htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), true);
97
- edgeChildren.forEach(function (edgeChild) {
98
- operateEdgeFn(edgeChild);
99
- });
100
- htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), false);
101
- }
102
- });
103
- }
104
80
  /**
105
81
  * 设置连线及子连线。带回退事务控制
106
82
  * @param {*} topo
107
83
  * @param {*} edges
108
- * @param {*} operateEdgeFn
84
+ * @param {*} updateEdgeFn
109
85
  */
110
86
 
111
- export function setEdgesAndChildren(topo, edges, operateEdgeFn) {
87
+ export function updateEdgesData(topo, edges, updateEdgeFn) {
112
88
  topo.historyManager.beginTransaction();
113
- loopEdgesAndChildren(topo, edges, operateEdgeFn);
89
+ edges.forEach(function (edge) {
90
+ updateEdgeFn(edge);
91
+ });
114
92
  topo.historyManager.endTransaction();
115
93
  }
116
94
  /**
117
- * 批量设置连线线形
95
+ * 批量设置连线线形。带回退事务控制
118
96
  *
119
97
  * @param {*} edges
120
98
  * @param {*} type
@@ -123,7 +101,7 @@ export function setEdgesAndChildren(topo, edges, operateEdgeFn) {
123
101
 
124
102
  export function setEdgesType(edges, type, topo) {
125
103
  var htTopo = topo.getHtTopo();
126
- setEdgesAndChildren(topo, edges, function (edge) {
104
+ updateEdgesData(topo, edges, function (edge) {
127
105
  htTopo.setGraphLinear(edge, {
128
106
  type: type
129
107
  });