@riil-frontend/component-topology 12.0.0-dev.9 → 12.1.0-dev.2
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/build/1.js +1 -1
- package/build/index.css +1 -1
- package/build/index.js +14 -14
- package/es/components/TemplateButton/index.module.scss +1 -1
- package/es/core/components/AlarmListPanel/components/AlarmListItem.js +58 -3
- package/es/core/components/TopoView/topoView.js +5 -1
- package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +5 -12
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +27 -10
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss +21 -1
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +9 -0
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js +2 -2
- package/es/core/editor/components/Toolbar/widgets/Layout/index.js +16 -2
- package/es/core/editor/hooks/useKeyboardShortcut.js +3 -1
- package/es/core/editor/utils/copyElementUtil.js +12 -0
- package/es/core/editor/utils/edgeTypeStyleUtil.js +8 -30
- package/es/core/hooks/useAlarm.js +131 -81
- package/es/core/hooks/useCmpLinkAlarm.js +153 -0
- package/es/core/hooks/useEventData.js +1 -2
- package/es/core/hooks/useGraphAlarmDisplay.js +91 -56
- package/es/core/hooks/useResourceConfig.js +1 -3
- package/es/core/hooks/useTopoEdit.js +31 -43
- package/es/core/models/Alarm.js +69 -142
- package/es/core/models/AttributeMetricDisplay.js +9 -3
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/cache/CiCache.d.ts +1 -1
- package/es/core/models/cache/CiCache.js +3 -3
- package/es/core/models/topoData.js +0 -1
- package/es/core/models/utils/linkUtils.js +20 -13
- package/es/core/services/topo/basic.js +2 -2
- package/es/core/store/models/topoConfig.js +7 -10
- package/es/core/store/models/topoMod.js +81 -134
- package/es/core/utils/edgeUtil.js +8 -0
- package/es/core/utils/metricUtil.js +8 -4
- package/es/core/utils/showGraphManageStatusUtil.js +3 -2
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +2 -2
- package/es/core/viewer/components/plugins/ViewerPlugin.js +3 -1
- package/es/core/viewer/components/titlebar/widgets/AlarmButton.js +1 -5
- package/es/networkTopo/components/TopoView.js +6 -11
- package/es/networkTopo/hooks/useEdgeExpand.js +2 -3
- package/es/networkTopo/services/topo/basic.js +3 -3
- package/es/networkTopo/store/topoCenter.js +260 -223
- package/es/style.js +1 -1
- package/es/utils/ResourceConfigUtil.js +3 -36
- package/es/utils/ciRefAttributeTranslateUtil.d.ts +9 -2
- package/es/utils/ciRefAttributeTranslateUtil.js +8 -9
- package/es/utils/topoData.js +1 -1
- package/lib/components/TemplateButton/index.module.scss +1 -1
- package/lib/core/components/AlarmListPanel/components/AlarmListItem.js +60 -3
- package/lib/core/components/TopoView/topoView.js +5 -1
- package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +6 -12
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +27 -9
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss +21 -1
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +8 -0
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js +1 -1
- package/lib/core/editor/components/Toolbar/widgets/Layout/index.js +16 -2
- package/lib/core/editor/hooks/useKeyboardShortcut.js +2 -0
- package/lib/core/editor/utils/copyElementUtil.js +15 -0
- package/lib/core/editor/utils/edgeTypeStyleUtil.js +8 -31
- package/lib/core/hooks/useAlarm.js +130 -79
- package/lib/core/hooks/useCmpLinkAlarm.js +166 -0
- package/lib/core/hooks/useEventData.js +1 -2
- package/lib/core/hooks/useGraphAlarmDisplay.js +91 -55
- package/lib/core/hooks/useResourceConfig.js +1 -3
- package/lib/core/hooks/useTopoEdit.js +30 -42
- package/lib/core/models/Alarm.js +69 -144
- package/lib/core/models/AttributeMetricDisplay.js +10 -2
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/cache/CiCache.d.ts +1 -1
- package/lib/core/models/cache/CiCache.js +3 -3
- package/lib/core/models/topoData.js +0 -1
- package/lib/core/models/utils/linkUtils.js +21 -13
- package/lib/core/services/topo/basic.js +2 -2
- package/lib/core/store/models/topoConfig.js +7 -10
- package/lib/core/store/models/topoMod.js +81 -134
- package/lib/core/utils/edgeUtil.js +10 -0
- package/lib/core/utils/metricUtil.js +8 -4
- package/lib/core/utils/showGraphManageStatusUtil.js +3 -2
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +2 -2
- package/lib/core/viewer/components/plugins/ViewerPlugin.js +3 -1
- package/lib/core/viewer/components/titlebar/widgets/AlarmButton.js +1 -5
- package/lib/networkTopo/components/TopoView.js +5 -14
- package/lib/networkTopo/hooks/useEdgeExpand.js +2 -3
- package/lib/networkTopo/services/topo/basic.js +3 -3
- package/lib/networkTopo/store/topoCenter.js +262 -225
- package/lib/style.js +1 -1
- package/lib/utils/ResourceConfigUtil.js +3 -38
- package/lib/utils/ciRefAttributeTranslateUtil.d.ts +9 -2
- package/lib/utils/ciRefAttributeTranslateUtil.js +8 -9
- package/lib/utils/topoData.js +1 -1
- package/package.json +2 -2
@@ -42,12 +42,6 @@ function getResourceConfigFromHt(topo) {
|
|
42
42
|
layers: sortBy(layers, 'order'),
|
43
43
|
groups: groups,
|
44
44
|
resources: resources,
|
45
|
-
exportLinkIdList: getExportLinkIdList({
|
46
|
-
topo: topo,
|
47
|
-
htTopo: htTopo,
|
48
|
-
dataModel: dataModel
|
49
|
-
}),
|
50
|
-
// 出口链路id列表
|
51
45
|
relateTopoIdList: getRelateTopoIdList(dataModel)
|
52
46
|
};
|
53
47
|
} // 查询关联拓扑id列表
|
@@ -64,33 +58,6 @@ function getRelateTopoIdList(dataModel) {
|
|
64
58
|
|
65
59
|
return topoIds;
|
66
60
|
}, []);
|
67
|
-
} // 查询出口链路列表
|
68
|
-
|
69
|
-
|
70
|
-
function getExportLinkIdList(_ref) {
|
71
|
-
var topo = _ref.topo,
|
72
|
-
htTopo = _ref.htTopo,
|
73
|
-
dataModel = _ref.dataModel;
|
74
|
-
var exportLinkIdList = [];
|
75
|
-
var edges = getEdges(dataModel);
|
76
|
-
rlog.debug(' 查询出口链路列表-edges', edges, dataModel);
|
77
|
-
edges.forEach(function (edge) {
|
78
|
-
var edgeData = htTopo.getEdgeData(edge); // 有组无子连线返回null
|
79
|
-
|
80
|
-
if (edgeData) {
|
81
|
-
// eslint-disable-next-line no-underscore-dangle
|
82
|
-
var id = edgeData._attrObject.id;
|
83
|
-
|
84
|
-
if (id) {
|
85
|
-
var linkData = topo.dataModel.getDataById(id);
|
86
|
-
|
87
|
-
if (isExitLink(linkData) && !exportLinkIdList.includes(id)) {
|
88
|
-
exportLinkIdList.push(id);
|
89
|
-
}
|
90
|
-
}
|
91
|
-
}
|
92
|
-
});
|
93
|
-
return exportLinkIdList;
|
94
61
|
}
|
95
62
|
|
96
63
|
function getLayerDatas(dataModel) {
|
@@ -114,9 +81,9 @@ function getLayerDatas(dataModel) {
|
|
114
81
|
return layers;
|
115
82
|
}
|
116
83
|
|
117
|
-
function getGroupDatas(
|
118
|
-
var groupElements =
|
119
|
-
layers =
|
84
|
+
function getGroupDatas(_ref) {
|
85
|
+
var groupElements = _ref.groupElements,
|
86
|
+
layers = _ref.layers;
|
120
87
|
// 获得视图上的区域配置
|
121
88
|
var groups = groupElements.filter(function (node) {
|
122
89
|
return !node.getParent();
|
@@ -1,12 +1,19 @@
|
|
1
|
+
interface Options {
|
2
|
+
/**
|
3
|
+
* 是否属性缓存重新请求数据
|
4
|
+
*/
|
5
|
+
refreshCiCache: boolean;
|
6
|
+
}
|
1
7
|
/**
|
2
8
|
* 翻译ci列表引用属性名称
|
3
9
|
* @param ciDatas
|
4
10
|
* @returns
|
5
11
|
*/
|
6
|
-
export declare function translateCisRefAttributeName(ciDatas: Array<any
|
12
|
+
export declare function translateCisRefAttributeName(ciDatas: Array<any>, options?: Options): Promise<Array<any>>;
|
7
13
|
/**
|
8
14
|
* 翻译ci引用属性名称
|
9
15
|
* @param ciData
|
10
16
|
* @returns
|
11
17
|
*/
|
12
|
-
export declare function translateCiRefAttributeName(ciData: any): Promise<any>;
|
18
|
+
export declare function translateCiRefAttributeName(ciData: any, options?: Options): Promise<any>;
|
19
|
+
export {};
|
@@ -16,7 +16,7 @@ function getCiRefAttributesMap(ciDatas, ciTypeMap) {
|
|
16
16
|
var id = ciData.id;
|
17
17
|
var attributeMap = ciData.attributeMap || ciData.attributes;
|
18
18
|
ciRefAttributeMap[id] = [];
|
19
|
-
var typeCode = ciData.
|
19
|
+
var typeCode = ciData.ciType || ciData.typeCode;
|
20
20
|
var ciTypeMeta = ciTypeMap[typeCode];
|
21
21
|
|
22
22
|
if (ciTypeMeta) {
|
@@ -77,14 +77,13 @@ function addRefCiNameToCiDatas(ciDatas, ciRefAttributesMap, refCiMap) {
|
|
77
77
|
});
|
78
78
|
});
|
79
79
|
}
|
80
|
+
|
80
81
|
/**
|
81
82
|
* 翻译ci列表引用属性名称
|
82
83
|
* @param ciDatas
|
83
84
|
* @returns
|
84
85
|
*/
|
85
|
-
|
86
|
-
|
87
|
-
export function translateCisRefAttributeName(_x) {
|
86
|
+
export function translateCisRefAttributeName(_x, _x2) {
|
88
87
|
return _translateCisRefAttributeName.apply(this, arguments);
|
89
88
|
}
|
90
89
|
/**
|
@@ -94,7 +93,7 @@ export function translateCisRefAttributeName(_x) {
|
|
94
93
|
*/
|
95
94
|
|
96
95
|
function _translateCisRefAttributeName() {
|
97
|
-
_translateCisRefAttributeName = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(ciDatas) {
|
96
|
+
_translateCisRefAttributeName = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(ciDatas, options) {
|
98
97
|
var ciTypeMap, ciRefAttributesMap, refIds, refCiMap;
|
99
98
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
100
99
|
while (1) switch (_context.prev = _context.next) {
|
@@ -118,7 +117,7 @@ function _translateCisRefAttributeName() {
|
|
118
117
|
|
119
118
|
case 7:
|
120
119
|
_context.next = 9;
|
121
|
-
return ciCache.load(refIds);
|
120
|
+
return ciCache.load(refIds, options === null || options === void 0 ? void 0 : options.refreshCiCache);
|
122
121
|
|
123
122
|
case 9:
|
124
123
|
refCiMap = _context.sent;
|
@@ -133,17 +132,17 @@ function _translateCisRefAttributeName() {
|
|
133
132
|
return _translateCisRefAttributeName.apply(this, arguments);
|
134
133
|
}
|
135
134
|
|
136
|
-
export function translateCiRefAttributeName(
|
135
|
+
export function translateCiRefAttributeName(_x3, _x4) {
|
137
136
|
return _translateCiRefAttributeName.apply(this, arguments);
|
138
137
|
}
|
139
138
|
|
140
139
|
function _translateCiRefAttributeName() {
|
141
|
-
_translateCiRefAttributeName = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ciData) {
|
140
|
+
_translateCiRefAttributeName = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ciData, options) {
|
142
141
|
var result;
|
143
142
|
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
144
143
|
while (1) switch (_context2.prev = _context2.next) {
|
145
144
|
case 0:
|
146
|
-
result = translateCisRefAttributeName([]);
|
145
|
+
result = translateCisRefAttributeName([ciData], options);
|
147
146
|
return _context2.abrupt("return", result[0]);
|
148
147
|
|
149
148
|
case 2:
|
package/es/utils/topoData.js
CHANGED
@@ -97,7 +97,7 @@ var tfLink = function tfLink(engine, link) {
|
|
97
97
|
export function getCiTypesFromCiElements(allCi) {
|
98
98
|
var ciTypes = [];
|
99
99
|
allCi.forEach(function (element) {
|
100
|
-
var typeCode = element.
|
100
|
+
var typeCode = element.ciType || element.typeCode;
|
101
101
|
|
102
102
|
if (typeCode && ciTypes.indexOf(typeCode) < 0) {
|
103
103
|
ciTypes.push(typeCode);
|
@@ -5,6 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
exports.__esModule = true;
|
6
6
|
exports["default"] = void 0;
|
7
7
|
|
8
|
+
var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
|
9
|
+
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
|
+
|
8
12
|
var _list = _interopRequireDefault(require("@alifd/next/lib/list"));
|
9
13
|
|
10
14
|
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
|
@@ -47,6 +51,7 @@ function AlarmListItem(props) {
|
|
47
51
|
var topo = props.topo,
|
48
52
|
alarmInfo = props.alarmInfo,
|
49
53
|
onClick = props.onClick;
|
54
|
+
console.log("AlarmListPanel", topo, alarmInfo);
|
50
55
|
return /*#__PURE__*/_react["default"].createElement(_list["default"].Item, {
|
51
56
|
className: _indexModule["default"].AlarmListItem,
|
52
57
|
media: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
@@ -101,10 +106,62 @@ function RiskListItem(props) {
|
|
101
106
|
}, "\u67E5\u770B\u8BE6\u60C5"))));
|
102
107
|
}
|
103
108
|
|
109
|
+
function SubListItem(props) {
|
110
|
+
// 传入参数
|
111
|
+
var topo = props.topo,
|
112
|
+
alarmInfo = props.alarmInfo,
|
113
|
+
onClick = props.onClick;
|
114
|
+
var creatAlarmTips = topo.viewProps.creatAlarmTips;
|
115
|
+
var subNode = topo.getData().nodes.find(function (node) {
|
116
|
+
return node.ciId === alarmInfo.mainCiId;
|
117
|
+
});
|
118
|
+
var plarm = alarmInfo.cmpCode ? "\u3010" + (subNode === null || subNode === void 0 ? void 0 : subNode.sourceName) + "\u3011" : "【本级平台】";
|
119
|
+
return /*#__PURE__*/_react["default"].createElement(_list["default"].Item, {
|
120
|
+
className: _indexModule["default"].AlarmListItem,
|
121
|
+
media: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
122
|
+
type: "gaojing-3",
|
123
|
+
size: "xs",
|
124
|
+
className: _indexModule["default"]["alarm-color-icon"] + " alarm-color-icon-lv" + alarmInfo.alertLevel
|
125
|
+
})
|
126
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
127
|
+
className: _indexModule["default"].content
|
128
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
129
|
+
className: _indexModule["default"].list,
|
130
|
+
onClick: function onClick() {
|
131
|
+
getNode(topo, alarmInfo);
|
132
|
+
}
|
133
|
+
}, "" + plarm + alarmInfo.alertObject + alarmInfo.alertTitle), alarmInfo.cmpCode ? /*#__PURE__*/_react["default"].createElement(_balloon["default"], {
|
134
|
+
trigger: /*#__PURE__*/_react["default"].createElement("span", {
|
135
|
+
className: _indexModule["default"].listLink
|
136
|
+
}, "\u67E5\u770B\u8BE6\u60C5"),
|
137
|
+
closable: true,
|
138
|
+
triggerType: "click",
|
139
|
+
align: "bl",
|
140
|
+
popupClassName: _indexModule["default"]["enjoydata-alarm-table-balloon"],
|
141
|
+
popupStyle: {
|
142
|
+
maxWidth: "700px",
|
143
|
+
width: 530
|
144
|
+
}
|
145
|
+
}, creatAlarmTips((0, _extends2["default"])({}, alarmInfo, {
|
146
|
+
sourceName: plarm
|
147
|
+
}))) : /*#__PURE__*/_react["default"].createElement("div", {
|
148
|
+
className: _indexModule["default"].listLink
|
149
|
+
}, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
150
|
+
onClick: onClick,
|
151
|
+
to: alarmLink(alarmInfo)
|
152
|
+
}, "\u67E5\u770B\u8BE6\u60C5"))));
|
153
|
+
}
|
154
|
+
|
104
155
|
function ListItem(props) {
|
105
|
-
var
|
106
|
-
|
107
|
-
|
156
|
+
var topo = props.topo,
|
157
|
+
alarmInfo = props.alarmInfo;
|
158
|
+
|
159
|
+
if (topo.isCMPTopo) {
|
160
|
+
return /*#__PURE__*/_react["default"].createElement(SubListItem, props);
|
161
|
+
} else {
|
162
|
+
var ListItemWidget = alarmInfo.eventType === "risk" ? RiskListItem : AlarmListItem;
|
163
|
+
return /*#__PURE__*/_react["default"].createElement(ListItemWidget, props);
|
164
|
+
}
|
108
165
|
}
|
109
166
|
|
110
167
|
var _default = ListItem;
|
@@ -202,7 +202,11 @@ var Topology = function Topology(props) {
|
|
202
202
|
|
203
203
|
if (initSelectionId) {
|
204
204
|
var ele = topo.getHtTopo().getGraphView().dm().getDataByTag(initSelectionId);
|
205
|
-
|
205
|
+
|
206
|
+
if (ele) {
|
207
|
+
topo.getHtTopo().getGraphView().sm().setSelection([ele]);
|
208
|
+
}
|
209
|
+
|
206
210
|
var selectionDispatchers = topo.store.getModelDispatchers('selection');
|
207
211
|
selectionDispatchers.update({
|
208
212
|
initSelectionId: null
|
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
12
12
|
var _edgeTypeStyleUtil = require("../../../../utils/edgeTypeStyleUtil");
|
13
13
|
|
14
|
+
var _edgeUtil = require("../../../../../utils/edgeUtil");
|
15
|
+
|
14
16
|
var _DropdownButton = _interopRequireDefault(require("../components/DropdownButton"));
|
15
17
|
|
16
18
|
var _WidgetBox = _interopRequireDefault(require("../WidgetBox"));
|
@@ -52,15 +54,7 @@ function EdgeColorButton(props) {
|
|
52
54
|
};
|
53
55
|
|
54
56
|
var getLines = function getLines(list) {
|
55
|
-
|
56
|
-
var arr = [];
|
57
|
-
loopEdges(list, function (edge) {
|
58
|
-
// eslint-disable-next-line eqeqeq
|
59
|
-
if (edge.getAttrObject().type == 'line') {
|
60
|
-
arr.push(edge);
|
61
|
-
}
|
62
|
-
});
|
63
|
-
return arr;
|
57
|
+
return list.filter(_edgeUtil.isCustomEdge);
|
64
58
|
};
|
65
59
|
|
66
60
|
(0, _react.useEffect)(function () {
|
@@ -69,7 +63,7 @@ function EdgeColorButton(props) {
|
|
69
63
|
var list = getLines(edges);
|
70
64
|
setLineWidth(1); // eslint-disable-next-line eqeqeq
|
71
65
|
|
72
|
-
if (selection.length == 1 &&
|
66
|
+
if (selection.length == 1 && list.length === 1) {
|
73
67
|
setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
|
74
68
|
}
|
75
69
|
|
@@ -83,7 +77,7 @@ function EdgeColorButton(props) {
|
|
83
77
|
var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
|
84
78
|
loopEdges(edges, function (edge) {
|
85
79
|
// eslint-disable-next-line eqeqeq
|
86
|
-
if (
|
80
|
+
if ((0, _edgeUtil.isCustomEdge)(edge)) {
|
87
81
|
var color = colors.hex;
|
88
82
|
edge.s('edge.color', color);
|
89
83
|
edge.s('edge.dash.color', color);
|
@@ -111,7 +105,7 @@ function EdgeColorButton(props) {
|
|
111
105
|
topo.historyManager.beginTransaction();
|
112
106
|
loopEdges(edges, function (edge) {
|
113
107
|
// eslint-disable-next-line eqeqeq
|
114
|
-
if (
|
108
|
+
if ((0, _edgeUtil.isCustomEdge)(edge)) {
|
115
109
|
edge.s('edge.dash.width', width);
|
116
110
|
edge.s('edge.width', width);
|
117
111
|
var style = edge.a('styles') || {};
|
@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
exports.__esModule = true;
|
6
6
|
exports["default"] = void 0;
|
7
7
|
|
8
|
+
var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
|
9
|
+
|
8
10
|
var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
|
9
11
|
|
10
12
|
var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
|
@@ -160,12 +162,19 @@ function EdgeType(props) {
|
|
160
162
|
className: _EdgeTypeModule["default"].lineBox
|
161
163
|
}, /*#__PURE__*/_react["default"].createElement(_form["default"], {
|
162
164
|
field: field,
|
163
|
-
inline: true,
|
164
165
|
labelAlign: "top"
|
165
166
|
}, /*#__PURE__*/_react["default"].createElement(FormItem, null, /*#__PURE__*/_react["default"].createElement(_LineType["default"], {
|
166
167
|
name: "lineButton"
|
167
|
-
})), /*#__PURE__*/_react["default"].createElement(
|
168
|
-
|
168
|
+
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_box["default"], {
|
169
|
+
direction: "row",
|
170
|
+
style: {
|
171
|
+
gap: 8
|
172
|
+
}
|
173
|
+
}, /*#__PURE__*/_react["default"].createElement(FormItem, {
|
174
|
+
label: "\u8D77\u70B9",
|
175
|
+
style: {
|
176
|
+
margin: 0
|
177
|
+
}
|
169
178
|
}, /*#__PURE__*/_react["default"].createElement(_select["default"], {
|
170
179
|
name: "startPoint",
|
171
180
|
placeholder: " ",
|
@@ -173,7 +182,8 @@ function EdgeType(props) {
|
|
173
182
|
container: function container(trigger) {
|
174
183
|
return trigger.parentNode;
|
175
184
|
}
|
176
|
-
}
|
185
|
+
},
|
186
|
+
className: _EdgeTypeModule["default"].endPointSelect
|
177
187
|
}, START_TYPE_OPTIONS.map(function (item, index) {
|
178
188
|
return /*#__PURE__*/_react["default"].createElement(Option, {
|
179
189
|
value: item.value,
|
@@ -186,7 +196,10 @@ function EdgeType(props) {
|
|
186
196
|
className: _EdgeTypeModule["default"].iconImg
|
187
197
|
}));
|
188
198
|
}))), /*#__PURE__*/_react["default"].createElement(FormItem, {
|
189
|
-
label: "\u7EC8\u70B9"
|
199
|
+
label: "\u7EC8\u70B9",
|
200
|
+
style: {
|
201
|
+
margin: 0
|
202
|
+
}
|
190
203
|
}, /*#__PURE__*/_react["default"].createElement(_select["default"], {
|
191
204
|
name: "endPoint",
|
192
205
|
placeholder: " ",
|
@@ -194,7 +207,8 @@ function EdgeType(props) {
|
|
194
207
|
container: function container(trigger) {
|
195
208
|
return trigger.parentNode;
|
196
209
|
}
|
197
|
-
}
|
210
|
+
},
|
211
|
+
className: _EdgeTypeModule["default"].endPointSelect
|
198
212
|
}, END_TYPE_OPTIONS.map(function (item, index) {
|
199
213
|
return /*#__PURE__*/_react["default"].createElement(Option, {
|
200
214
|
value: item.value,
|
@@ -207,7 +221,10 @@ function EdgeType(props) {
|
|
207
221
|
className: _EdgeTypeModule["default"].iconImg
|
208
222
|
}));
|
209
223
|
}))), /*#__PURE__*/_react["default"].createElement(FormItem, {
|
210
|
-
label: "\u7C7B\u578B"
|
224
|
+
label: "\u7C7B\u578B",
|
225
|
+
style: {
|
226
|
+
margin: 0
|
227
|
+
}
|
211
228
|
}, /*#__PURE__*/_react["default"].createElement(_select["default"], {
|
212
229
|
name: "lineMold",
|
213
230
|
popupProps: {
|
@@ -215,7 +232,8 @@ function EdgeType(props) {
|
|
215
232
|
return trigger.parentNode;
|
216
233
|
}
|
217
234
|
},
|
218
|
-
placeholder: " "
|
235
|
+
placeholder: " ",
|
236
|
+
className: _EdgeTypeModule["default"].lineMoldSelect
|
219
237
|
}, LINE_MOLD_OPTIONS.map(function (item, index) {
|
220
238
|
return /*#__PURE__*/_react["default"].createElement(Option, {
|
221
239
|
value: item.value,
|
@@ -227,7 +245,7 @@ function EdgeType(props) {
|
|
227
245
|
alt: "",
|
228
246
|
className: _EdgeTypeModule["default"].iconImg
|
229
247
|
}));
|
230
|
-
})))));
|
248
|
+
})))))));
|
231
249
|
}
|
232
250
|
|
233
251
|
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;
|
@@ -55,6 +55,14 @@ var LINE_TYPE_OPTIONS = [{
|
|
55
55
|
// },
|
56
56
|
];
|
57
57
|
|
58
|
+
if (localStorage.getItem('topo.test.edge.customType') === 'true') {
|
59
|
+
LINE_TYPE_OPTIONS.push({
|
60
|
+
value: 'points',
|
61
|
+
label: '自由线形',
|
62
|
+
icon: 'topo_linear_icon_pointsline'
|
63
|
+
});
|
64
|
+
}
|
65
|
+
|
58
66
|
var LineType = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
59
67
|
var value = props.value,
|
60
68
|
onChange = props.onChange,
|
@@ -69,7 +69,7 @@ function EdgeTypeButton(props) {
|
|
69
69
|
return;
|
70
70
|
}
|
71
71
|
|
72
|
-
(0, _edgeTypeStyleUtil.
|
72
|
+
(0, _edgeTypeStyleUtil.updateEdgesData)(topo, edges, function (edge) {
|
73
73
|
if (name === 'startPoint') {
|
74
74
|
// 删除设置
|
75
75
|
['sourceArrow', 'sourceSolidCircle', 'sourceNoneCircle'].forEach(function (iconName) {
|
@@ -40,6 +40,11 @@ function Layout(props) {
|
|
40
40
|
selection = _topo$store$useModelS.selection;
|
41
41
|
|
42
42
|
var setDisabled = function setDisabled(data) {
|
43
|
+
if (topoShowType !== 'layers' && selection.length === 1) {
|
44
|
+
//中心节点布局,选中一个节点非分层情况下,需要星型和树形布局亮起来
|
45
|
+
return data == 'rectangle' || data == 'hierarchical';
|
46
|
+
}
|
47
|
+
|
43
48
|
if (topoShowType == 'layers' && selection.length == 1 && !(0, _htElementDataUtil.isGroup)(selection[0])) {
|
44
49
|
return data != 'rectangle';
|
45
50
|
} else {
|
@@ -57,7 +62,11 @@ function Layout(props) {
|
|
57
62
|
|
58
63
|
|
59
64
|
if (topoShowType != 'layers' && selection.length == 1) {
|
60
|
-
|
65
|
+
if (layouType == 'hierarchical') {
|
66
|
+
topo.getHtTopo().layoutInContainer(layouType);
|
67
|
+
} else {
|
68
|
+
topo.getHtTopo().layoutTopoBySelectNode(layouType, selectionElements[0]);
|
69
|
+
}
|
61
70
|
} // eslint-disable-next-line eqeqeq
|
62
71
|
|
63
72
|
|
@@ -72,7 +81,7 @@ function Layout(props) {
|
|
72
81
|
topo.historyManager.beginTransaction();
|
73
82
|
setLayout(v); // eslint-disable-next-line eqeqeq
|
74
83
|
|
75
|
-
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) {
|
84
|
+
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) {
|
76
85
|
globalLayout(v);
|
77
86
|
}
|
78
87
|
|
@@ -150,6 +159,11 @@ function isLayoutEnabled(props) {
|
|
150
159
|
|
151
160
|
if (topoShowType !== 'layers' && !selection.length) {
|
152
161
|
return true;
|
162
|
+
} //中心节点布局,选中一个节点不是分层的情况下,按钮亮起
|
163
|
+
|
164
|
+
|
165
|
+
if (topoShowType !== 'layers' && selection.length === 1) {
|
166
|
+
return true;
|
153
167
|
}
|
154
168
|
|
155
169
|
return false;
|
@@ -44,8 +44,10 @@ function unbindKeyboardShortcuts(props) {
|
|
44
44
|
|
45
45
|
function useKeyboardShortcut(props) {
|
46
46
|
(0, _react.useEffect)(function () {
|
47
|
+
(0, _copyElementUtil.initPasteEventListener)();
|
47
48
|
initKeyboardShortcuts(props);
|
48
49
|
return function () {
|
50
|
+
(0, _copyElementUtil.destroyPasteEventListener)();
|
49
51
|
unbindKeyboardShortcuts(props);
|
50
52
|
};
|
51
53
|
}, []);
|
@@ -3,8 +3,10 @@
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
5
|
exports.__esModule = true;
|
6
|
+
exports.destroyPasteEventListener = destroyPasteEventListener;
|
6
7
|
exports.handleCopyHotkey = handleCopyHotkey;
|
7
8
|
exports.handlePasteHotkey = handlePasteHotkey;
|
9
|
+
exports.initPasteEventListener = initPasteEventListener;
|
8
10
|
|
9
11
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
10
12
|
|
@@ -21,6 +23,19 @@ function handleCopyHotkey(event, options) {
|
|
21
23
|
}
|
22
24
|
}
|
23
25
|
|
26
|
+
function initPasteEventListener() {
|
27
|
+
document.addEventListener("paste", handlePasteEventListener);
|
28
|
+
}
|
29
|
+
|
30
|
+
function destroyPasteEventListener() {
|
31
|
+
document.removeEventListener("paste", handlePasteEventListener);
|
32
|
+
}
|
33
|
+
|
34
|
+
function handlePasteEventListener(e) {
|
35
|
+
var clipdata = e.clipboardData || window.clipboardData;
|
36
|
+
console.log("主动粘贴", clipdata.getData("text/plain"));
|
37
|
+
}
|
38
|
+
|
24
39
|
function handlePasteHotkey(event, options) {
|
25
40
|
var target = event.target || event.srcElement;
|
26
41
|
var tagName = target.tagName;
|
@@ -3,9 +3,8 @@
|
|
3
3
|
exports.__esModule = true;
|
4
4
|
exports.getEdgesBySelection = getEdgesBySelection;
|
5
5
|
exports.isNodeAllEdges = isNodeAllEdges;
|
6
|
-
exports.loopEdgesAndChildren = loopEdgesAndChildren;
|
7
|
-
exports.setEdgesAndChildren = setEdgesAndChildren;
|
8
6
|
exports.setEdgesType = setEdgesType;
|
7
|
+
exports.updateEdgesData = updateEdgesData;
|
9
8
|
|
10
9
|
var _htElementUtils = require("../../../utils/htElementUtils");
|
11
10
|
|
@@ -89,45 +88,23 @@ function isNodeAllEdges(topo) {
|
|
89
88
|
});
|
90
89
|
return inEdges;
|
91
90
|
}
|
92
|
-
/**
|
93
|
-
* 遍历连线及子连线
|
94
|
-
* @param {*} topo
|
95
|
-
* @param {*} edges
|
96
|
-
* @param {*} operateEdgeFn
|
97
|
-
*/
|
98
|
-
|
99
|
-
|
100
|
-
function loopEdgesAndChildren(topo, edges, operateEdgeFn) {
|
101
|
-
var htTopo = topo.getHtTopo();
|
102
|
-
edges.forEach(function (edge) {
|
103
|
-
operateEdgeFn(edge);
|
104
|
-
|
105
|
-
if (edge.isEdgeGroupAgent()) {
|
106
|
-
// 连线组折叠时同时设置子连线
|
107
|
-
var edgeChildren = edge.getEdgeGroup().getEdges().toArray();
|
108
|
-
htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), true);
|
109
|
-
edgeChildren.forEach(function (edgeChild) {
|
110
|
-
operateEdgeFn(edgeChild);
|
111
|
-
});
|
112
|
-
htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), false);
|
113
|
-
}
|
114
|
-
});
|
115
|
-
}
|
116
91
|
/**
|
117
92
|
* 设置连线及子连线。带回退事务控制
|
118
93
|
* @param {*} topo
|
119
94
|
* @param {*} edges
|
120
|
-
* @param {*}
|
95
|
+
* @param {*} updateEdgeFn
|
121
96
|
*/
|
122
97
|
|
123
98
|
|
124
|
-
function
|
99
|
+
function updateEdgesData(topo, edges, updateEdgeFn) {
|
125
100
|
topo.historyManager.beginTransaction();
|
126
|
-
|
101
|
+
edges.forEach(function (edge) {
|
102
|
+
updateEdgeFn(edge);
|
103
|
+
});
|
127
104
|
topo.historyManager.endTransaction();
|
128
105
|
}
|
129
106
|
/**
|
130
|
-
*
|
107
|
+
* 批量设置连线线形。带回退事务控制
|
131
108
|
*
|
132
109
|
* @param {*} edges
|
133
110
|
* @param {*} type
|
@@ -137,7 +114,7 @@ function setEdgesAndChildren(topo, edges, operateEdgeFn) {
|
|
137
114
|
|
138
115
|
function setEdgesType(edges, type, topo) {
|
139
116
|
var htTopo = topo.getHtTopo();
|
140
|
-
|
117
|
+
updateEdgesData(topo, edges, function (edge) {
|
141
118
|
htTopo.setGraphLinear(edge, {
|
142
119
|
type: type
|
143
120
|
});
|