@riil-frontend/component-topology 9.0.0-a.9 → 9.0.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.
- package/build/1.js +2 -2
- package/build/2.js +1 -1
- package/build/index.css +1 -1
- package/build/index.js +13 -13
- package/es/core/components/TopoView/GraphViewPanel.js +17 -4
- package/es/core/components/TopoView/TopoView.module.scss +17 -3
- package/es/core/editor/components/BackgroundView/index.module.scss +2 -0
- package/es/core/editor/components/EditorPlugin.js +4 -1
- package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +1 -1
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +20 -5
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss +5 -1
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +31 -12
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss +12 -2
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js +6 -0
- package/es/core/editor/components/Toolbar/widgets/FontSizeWidget.js +1 -1
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/groupTitle.js +1 -1
- package/es/core/editor/components/settings/core/getPropertyViewType.js +3 -0
- package/es/core/editor/components/settings/core/updateElementProperty.js +6 -1
- package/es/core/editor/components/settings/propertyViews/group/DataTab/hoooks/useGroupRelateResource.js +4 -3
- package/es/core/editor/components/settings/propertyViews/layer/DataTab/NodeList.js +3 -2
- package/es/core/editor/components/settings/propertyViews/node/data/BindIpInput.js +95 -0
- package/es/core/editor/components/settings/propertyViews/node/data/Data.js +46 -14
- package/es/core/editor/config/themes.js +53 -2
- package/es/core/editor/utils/edgeTypeStyleUtil.js +38 -0
- package/es/core/hooks/useCanvasTheme.js +12 -4
- package/es/core/hooks/useResourceConfig.js +2 -1
- package/es/core/hooks/useTopoEdit.js +120 -19
- package/es/core/hooks/useTopoFullscreen.js +32 -0
- package/es/core/models/AttributeMetricDisplay.js +89 -74
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/attributeFormatter/index.js +16 -16
- package/es/core/models/topoData.js +16 -9
- package/es/core/models/utils/linkUtils.js +52 -27
- package/es/core/store/models/topoConfig.js +51 -20
- package/es/core/test/Test.js +52 -0
- package/es/core/utils/graphLinkUtil.js +11 -6
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/BaseInfo.js +16 -2
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +8 -78
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js +14 -0
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/hooks/useMetricPolling.js +27 -37
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js +57 -1
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/index.module.scss +6 -0
- package/es/networkTopo/getTopoData.js +2 -1
- package/es/networkTopo/models/IpNodeTagsTipsBuilder.js +113 -0
- package/es/networkTopo/models/LinkDynamicStyleExecutor.js +8 -8
- package/es/networkTopo/models/TopoCenter.js +4 -3
- package/es/networkTopo/services/link.js +1 -1
- package/es/networkTopo/services/topo/basic.js +27 -26
- package/es/networkTopo/services/topo/networkLink.js +45 -3
- package/es/networkTopo/utils/exitLinkUtil.js +257 -0
- package/es/style.js +1 -0
- package/es/utils/ResourceConfigUtil.js +5 -4
- package/es/utils/htElementDataUtil.js +1 -7
- package/es/utils/htElementUtils.js +21 -21
- package/lib/core/components/TopoView/GraphViewPanel.js +18 -3
- package/lib/core/components/TopoView/TopoView.module.scss +17 -3
- package/lib/core/editor/components/BackgroundView/index.module.scss +2 -0
- package/lib/core/editor/components/EditorPlugin.js +7 -1
- package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +1 -1
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +19 -3
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss +5 -1
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +31 -12
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss +12 -2
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js +6 -0
- package/lib/core/editor/components/Toolbar/widgets/FontSizeWidget.js +1 -1
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/groupTitle.js +1 -1
- package/lib/core/editor/components/settings/core/getPropertyViewType.js +3 -0
- package/lib/core/editor/components/settings/core/updateElementProperty.js +6 -1
- package/lib/core/editor/components/settings/propertyViews/group/DataTab/hoooks/useGroupRelateResource.js +3 -3
- package/lib/core/editor/components/settings/propertyViews/layer/DataTab/NodeList.js +3 -1
- package/lib/core/editor/components/settings/propertyViews/node/data/BindIpInput.js +111 -0
- package/lib/core/editor/components/settings/propertyViews/node/data/Data.js +48 -14
- package/lib/core/editor/config/themes.js +53 -2
- package/lib/core/editor/utils/edgeTypeStyleUtil.js +39 -0
- package/lib/core/hooks/useCanvasTheme.js +12 -4
- package/lib/core/hooks/useResourceConfig.js +2 -1
- package/lib/core/hooks/useTopoEdit.js +121 -18
- package/lib/core/hooks/useTopoFullscreen.js +42 -0
- package/lib/core/models/AttributeMetricDisplay.js +85 -74
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/attributeFormatter/index.js +14 -14
- package/lib/core/models/topoData.js +16 -9
- package/lib/core/models/utils/linkUtils.js +53 -26
- package/lib/core/store/models/topoConfig.js +56 -19
- package/lib/core/test/Test.js +52 -0
- package/lib/core/utils/graphLinkUtil.js +10 -5
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/BaseInfo.js +15 -1
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +7 -78
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js +14 -0
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/hooks/useMetricPolling.js +27 -36
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js +58 -1
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/index.module.scss +6 -0
- package/lib/networkTopo/getTopoData.js +2 -1
- package/lib/networkTopo/models/IpNodeTagsTipsBuilder.js +123 -0
- package/lib/networkTopo/models/LinkDynamicStyleExecutor.js +8 -8
- package/lib/networkTopo/models/TopoCenter.js +4 -3
- package/lib/networkTopo/services/topo/basic.js +28 -28
- package/lib/networkTopo/services/topo/networkLink.js +45 -3
- package/lib/networkTopo/utils/exitLinkUtil.js +269 -0
- package/lib/style.js +1 -0
- package/lib/utils/ResourceConfigUtil.js +4 -4
- package/lib/utils/htElementDataUtil.js +0 -10
- package/lib/utils/htElementUtils.js +21 -21
- package/package.json +2 -2
@@ -5,7 +5,6 @@
|
|
5
5
|
background: #FFFFFF;
|
6
6
|
border-radius: 4px;
|
7
7
|
margin-bottom: -7px;
|
8
|
-
|
9
8
|
:global {
|
10
9
|
.#{$css-prefix}form-item:first-child{
|
11
10
|
margin-top: 0;
|
@@ -15,6 +14,11 @@
|
|
15
14
|
margin-top: 7px;
|
16
15
|
margin-bottom: 7px;
|
17
16
|
}
|
17
|
+
.#{$css-prefix}form-item:nth-child(2){
|
18
|
+
display: block !important;
|
19
|
+
margin-top: 7px;
|
20
|
+
margin-bottom: 0px;
|
21
|
+
}
|
18
22
|
.#{$css-prefix}form.#{$css-prefix}inline .#{$css-prefix}form-item:not(:last-child) {
|
19
23
|
margin-right: 8px;
|
20
24
|
.#{$css-prefix}select-trigger {
|
@@ -36,29 +36,48 @@ var LINE_TYPE_OPTIONS = [{
|
|
36
36
|
value: 'ortho',
|
37
37
|
label: '双折线',
|
38
38
|
icon: 'topo_linear_icon_bilinear'
|
39
|
+
}, {
|
40
|
+
value: 'ripple',
|
41
|
+
label: '单弧线',
|
42
|
+
icon: 'topo_linear_icon_arc_line'
|
39
43
|
}, {
|
40
44
|
value: 'doublearc',
|
41
45
|
label: '双弧线',
|
42
46
|
icon: 'topo_linear_icon_arcline'
|
47
|
+
}, {
|
48
|
+
value: 'points',
|
49
|
+
label: '自由线形',
|
50
|
+
icon: 'topo_linear_icon_pointsline'
|
43
51
|
}];
|
44
52
|
|
45
53
|
var LineType = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
46
54
|
var value = props.value,
|
47
|
-
onChange = props.onChange
|
55
|
+
onChange = props.onChange,
|
56
|
+
disable = props.disable;
|
48
57
|
|
49
58
|
function lineButton(item) {
|
50
|
-
|
59
|
+
if (disable) {
|
60
|
+
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
61
|
+
className: _LineTypeModule["default"].redioBtnDisable
|
62
|
+
}, /*#__PURE__*/_react["default"].createElement("img", {
|
63
|
+
src: "/img/topo/editor/lineType/" + item.icon + "_disable.svg",
|
64
|
+
alt: "",
|
65
|
+
className: _LineTypeModule["default"].iconImg
|
66
|
+
}));
|
67
|
+
} else {
|
68
|
+
var _classNames;
|
51
69
|
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
70
|
+
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
71
|
+
className: (0, _classnames["default"])(_LineTypeModule["default"].redioBtn, (_classNames = {}, _classNames[_LineTypeModule["default"].selected] = value === item.value, _classNames)),
|
72
|
+
onClick: function onClick() {
|
73
|
+
onChange(item.value);
|
74
|
+
}
|
75
|
+
}, /*#__PURE__*/_react["default"].createElement("img", {
|
76
|
+
src: "/img/topo/editor/lineType/" + item.icon + ".svg",
|
77
|
+
alt: "",
|
78
|
+
className: _LineTypeModule["default"].iconImg
|
79
|
+
}));
|
80
|
+
}
|
62
81
|
}
|
63
82
|
|
64
83
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
@@ -1,5 +1,15 @@
|
|
1
1
|
.lineType{
|
2
2
|
display:flex;
|
3
|
+
.redioBtnDisable {
|
4
|
+
width: 24px;
|
5
|
+
height: 24px;
|
6
|
+
border-radius: 4px;
|
7
|
+
border: none !important;
|
8
|
+
color: #4D6277;
|
9
|
+
padding: 0;
|
10
|
+
margin-right: 10px;
|
11
|
+
text-align: center;
|
12
|
+
}
|
3
13
|
.redioBtn {
|
4
14
|
width: 24px;
|
5
15
|
height: 24px;
|
@@ -7,9 +17,9 @@
|
|
7
17
|
border: none !important;
|
8
18
|
color: #4D6277;
|
9
19
|
padding: 0;
|
10
|
-
margin-right:
|
20
|
+
margin-right: 10px;
|
11
21
|
text-align: center;
|
12
|
-
|
22
|
+
|
13
23
|
.iconImg {
|
14
24
|
vertical-align: middle;
|
15
25
|
}
|
@@ -68,6 +68,12 @@ function EdgeTypeButton(props) {
|
|
68
68
|
return;
|
69
69
|
}
|
70
70
|
|
71
|
+
if (name == 'baseAgreement') {
|
72
|
+
/** TODO: 自动调整api调用*/
|
73
|
+
htTopo.setEdgeMultarc(edges, value);
|
74
|
+
return;
|
75
|
+
}
|
76
|
+
|
71
77
|
(0, _edgeTypeStyleUtil.setEdgesAndChildren)(topo, edges, function (edge) {
|
72
78
|
if (name === 'startPoint') {
|
73
79
|
// 删除设置
|
@@ -33,7 +33,7 @@ function getTextStyle(element) {
|
|
33
33
|
color: (0, _colorUtil.parseColor)(element.s('group.title.color')),
|
34
34
|
underline: underline
|
35
35
|
}, _fontStyleUtil["default"].toMap(element.s('group.title.font')), {
|
36
|
-
fontSize: font.fontSize ||
|
36
|
+
fontSize: font.fontSize || ((0, _clusterUtil.isClusterHtElement)(element) ? 20 : 24),
|
37
37
|
fontFamily: font.fontFamily || '微软雅黑'
|
38
38
|
}, (0, _colorUtil.parseBackground)(element.s('group.title.background')));
|
39
39
|
}
|
@@ -13,6 +13,9 @@ function getPropertyViewType(selection) {
|
|
13
13
|
if (!selectionSize) {
|
14
14
|
// 未选
|
15
15
|
viewType = 'view';
|
16
|
+
} else if ((selectionElement === null || selectionElement === void 0 ? void 0 : selectionElement.getLayer()) === 'backgroundImage') {
|
17
|
+
// 背景图
|
18
|
+
viewType = 'view';
|
16
19
|
} else if (selectionSize >= 2) {
|
17
20
|
// 多选
|
18
21
|
viewType = 'multiple';
|
@@ -5,7 +5,12 @@ exports["default"] = updateElementProperty;
|
|
5
5
|
|
6
6
|
function updateElementProperty(topo, name, value) {
|
7
7
|
// const element = topo.getDataModel().getDataById(selection[0].id);
|
8
|
-
var element = topo.getSelectionModel().getFirstData();
|
8
|
+
var element = topo.getSelectionModel().getFirstData();
|
9
|
+
console.info("updateElementProperty", topo.getSelectionModel().getSelection(), {
|
10
|
+
element: element,
|
11
|
+
name: name,
|
12
|
+
value: value
|
13
|
+
});
|
9
14
|
|
10
15
|
if (name.startsWith('attrObject.')) {
|
11
16
|
element.setAttr(name.replace('attrObject.', ''), value);
|
@@ -11,8 +11,6 @@ var _componentTopologyGraph = require("@riil-frontend/component-topology-graph")
|
|
11
11
|
|
12
12
|
var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
|
13
13
|
|
14
|
-
var _htElementDataUtil = require("../../../../../../../../utils/htElementDataUtil");
|
15
|
-
|
16
14
|
var _htElementUtils = require("../../../../../../../../utils/htElementUtils");
|
17
15
|
|
18
16
|
function sortResourcesByName(resources) {
|
@@ -30,7 +28,9 @@ function useGroupRelateResource(props) {
|
|
30
28
|
} : _props$useGroupSortRe; // const [resources, setResources] = useState([]);
|
31
29
|
// 过滤出资源
|
32
30
|
|
33
|
-
var resourceNodes = (0,
|
31
|
+
var resourceNodes = (0, _htElementUtils.getGroupChildren)(group).filter(function (item) {
|
32
|
+
return !!item.getTag();
|
33
|
+
}); // 资源按名称排序
|
34
34
|
|
35
35
|
var useSortNodes = useGroupSortResources || ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.sortResources) || sortResourcesByName;
|
36
36
|
var data = useSortNodes(resourceNodes.map(function (node) {
|
@@ -11,6 +11,8 @@ var _componentTopologyGraph = require("@riil-frontend/component-topology-graph")
|
|
11
11
|
|
12
12
|
var _ResourceList = _interopRequireDefault(require("../../../common/GroupNodeList/ResourceList"));
|
13
13
|
|
14
|
+
var _htElementUtils = require("../../../../../../../utils/htElementUtils");
|
15
|
+
|
14
16
|
var _htElementDataUtil = require("../../../../../../../utils/htElementDataUtil");
|
15
17
|
|
16
18
|
/**
|
@@ -19,7 +21,7 @@ var _htElementDataUtil = require("../../../../../../../utils/htElementDataUtil")
|
|
19
21
|
function LayerResourceList(props) {
|
20
22
|
var topo = props.topo,
|
21
23
|
layer = props.layer;
|
22
|
-
var relateDataNodes = (0,
|
24
|
+
var relateDataNodes = (0, _htElementUtils.getLayerChildren)(layer).filter(_htElementDataUtil.isResourceElement);
|
23
25
|
var data = relateDataNodes.map(function (node) {
|
24
26
|
return {
|
25
27
|
title: node.a('name'),
|
@@ -0,0 +1,111 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
exports.__esModule = true;
|
6
|
+
exports["default"] = BindIpInput;
|
7
|
+
|
8
|
+
var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
|
9
|
+
|
10
|
+
var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
|
11
|
+
|
12
|
+
var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
|
13
|
+
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
15
|
+
|
16
|
+
var _exitLinkUtil = require("../../../../../../../networkTopo/utils/exitLinkUtil");
|
17
|
+
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
19
|
+
|
20
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
21
|
+
|
22
|
+
var FormItem = _form["default"].Item;
|
23
|
+
/**
|
24
|
+
* @return {React.ReactNode | null}
|
25
|
+
*/
|
26
|
+
|
27
|
+
function BindIpInput(props) {
|
28
|
+
var _values$attrObjectBi;
|
29
|
+
|
30
|
+
var nodeElement = props.nodeElement,
|
31
|
+
topo = props.topo,
|
32
|
+
topoEditApi = props.topoEditApi,
|
33
|
+
values = props.values,
|
34
|
+
onChange = props.onChange,
|
35
|
+
fieldItem = props.fieldItem; // const currentResId = node.tag;
|
36
|
+
// console.log(
|
37
|
+
// "nodeElement, topo, topoEditApi, node",
|
38
|
+
// nodeElement,
|
39
|
+
// topo,
|
40
|
+
// topoEditApi,
|
41
|
+
// values
|
42
|
+
// );
|
43
|
+
|
44
|
+
var _useState = (0, _react.useState)(""),
|
45
|
+
error = _useState[0],
|
46
|
+
setError = _useState[1];
|
47
|
+
|
48
|
+
var _useState2 = (0, _react.useState)((_values$attrObjectBi = values["attrObject.bindIp"]) !== null && _values$attrObjectBi !== void 0 ? _values$attrObjectBi : ""),
|
49
|
+
txtValue = _useState2[0],
|
50
|
+
setTxtValue = _useState2[1];
|
51
|
+
|
52
|
+
var saveIp = function saveIp(v) {
|
53
|
+
fieldItem.validate(function (errors, vals) {
|
54
|
+
if (errors) {
|
55
|
+
console.error("saveIp-error", errors, vals);
|
56
|
+
} else {
|
57
|
+
setError("");
|
58
|
+
onChange(txtValue);
|
59
|
+
topoEditApi.relateNodeIp(txtValue, nodeElement);
|
60
|
+
}
|
61
|
+
});
|
62
|
+
};
|
63
|
+
|
64
|
+
(0, _react.useEffect)(function () {
|
65
|
+
fieldItem.reset();
|
66
|
+
setTxtValue(values["attrObject.bindIp"]);
|
67
|
+
}, [values]);
|
68
|
+
|
69
|
+
var inputChange = function inputChange(v) {
|
70
|
+
setTxtValue(v); // onChange(v);
|
71
|
+
}; // 图片节点验证ip唯一性
|
72
|
+
|
73
|
+
|
74
|
+
var checkIp = function checkIp(rule, value, callback) {
|
75
|
+
var dm = topo.getDataModel();
|
76
|
+
var isUnique = (0, _exitLinkUtil.isUniqueIp)(dm, value, nodeElement); // console.log("checkIp", isUnique);
|
77
|
+
|
78
|
+
if (!isUnique) {
|
79
|
+
return callback("ip不能重复");
|
80
|
+
} else {
|
81
|
+
return callback();
|
82
|
+
}
|
83
|
+
};
|
84
|
+
|
85
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
86
|
+
style: {
|
87
|
+
display: "flex"
|
88
|
+
}
|
89
|
+
}, /*#__PURE__*/_react["default"].createElement(FormItem, {
|
90
|
+
label: "\u5173\u8054IP",
|
91
|
+
pattern: /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/,
|
92
|
+
patternTrigger: "onBlur",
|
93
|
+
patternMessage: "IP\u5730\u5740\u683C\u5F0F\u4E0D\u6B63\u786E",
|
94
|
+
validator: checkIp
|
95
|
+
}, /*#__PURE__*/_react["default"].createElement(_input["default"], {
|
96
|
+
placeholder: "\u8BF7\u8F93\u5165Ip\u5730\u5740",
|
97
|
+
name: "attrObject.bindIp",
|
98
|
+
state: error,
|
99
|
+
value: txtValue,
|
100
|
+
maxLength: 128,
|
101
|
+
onChange: inputChange
|
102
|
+
})), /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
103
|
+
type: "primary",
|
104
|
+
text: true,
|
105
|
+
onClick: saveIp,
|
106
|
+
style: {
|
107
|
+
marginLeft: 10,
|
108
|
+
marginTop: 27
|
109
|
+
}
|
110
|
+
}, "\u4FDD\u5B58"));
|
111
|
+
}
|
@@ -27,6 +27,10 @@ var _NodeRelateResourceButton = _interopRequireDefault(require("./NodeRelateReso
|
|
27
27
|
|
28
28
|
var _PlatformDisplay = _interopRequireDefault(require("./PlatformDisplay"));
|
29
29
|
|
30
|
+
var _BindIpInput = _interopRequireDefault(require("./BindIpInput"));
|
31
|
+
|
32
|
+
var _exitLinkUtil = require("../../../../../../../networkTopo/utils/exitLinkUtil");
|
33
|
+
|
30
34
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
31
35
|
|
32
36
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
@@ -37,20 +41,21 @@ var CollapsePanel = _collapse["default"].Panel;
|
|
37
41
|
function parseValues(values) {
|
38
42
|
return (0, _extends2["default"])({}, values, {
|
39
43
|
"attrObject.customName": values["attrObject.customName"] || values["attrObject.name"],
|
40
|
-
"attrObject.bindTopo": values["attrObject.bindTopo"] || ""
|
41
|
-
|
44
|
+
"attrObject.bindTopo": values["attrObject.bindTopo"] || "",
|
45
|
+
// 解决切换节点时关联拓扑选项未重置
|
46
|
+
"attrObject.bindIp": values["attrObject.bindIp"] || ""
|
42
47
|
});
|
43
48
|
}
|
44
49
|
|
45
50
|
function getBindType(values) {
|
46
|
-
if (values.tag) {
|
47
|
-
return "resource";
|
48
|
-
}
|
49
|
-
|
50
51
|
if (values.attrObject.bindType) {
|
51
52
|
return values.attrObject.bindType;
|
52
53
|
}
|
53
54
|
|
55
|
+
if (values.tag && !values.tag.startsWith("ip:")) {
|
56
|
+
return "resource";
|
57
|
+
}
|
58
|
+
|
54
59
|
return "none";
|
55
60
|
}
|
56
61
|
|
@@ -61,15 +66,20 @@ function Data(props) {
|
|
61
66
|
values = props.values,
|
62
67
|
_onChange = props.onChange,
|
63
68
|
editorProps = props.editorProps;
|
64
|
-
var bindType = getBindType(values);
|
69
|
+
var bindType = getBindType(values); // console.log("node, values", node, values);
|
65
70
|
|
66
71
|
var field = _field["default"].useField({
|
67
72
|
autoUnmount: false,
|
68
73
|
values: parseValues(values),
|
69
74
|
onChange: function onChange(name, value) {
|
70
|
-
|
75
|
+
field.validate(function (errors, vals) {
|
76
|
+
if (errors) {// console.error("field-Data", errors, vals);
|
77
|
+
} else {
|
78
|
+
var newValues = field.getValues();
|
71
79
|
|
72
|
-
|
80
|
+
_onChange(name, value, newValues);
|
81
|
+
}
|
82
|
+
});
|
73
83
|
}
|
74
84
|
});
|
75
85
|
|
@@ -129,7 +139,7 @@ function Data(props) {
|
|
129
139
|
}, /*#__PURE__*/_react["default"].createElement(_form["default"], {
|
130
140
|
field: field,
|
131
141
|
labelAlign: "top"
|
132
|
-
}, !values.tag && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
|
142
|
+
}, (!values.tag || bindType === "ip") && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
|
133
143
|
label: "\u5173\u8054\u7C7B\u578B"
|
134
144
|
}, /*#__PURE__*/_react["default"].createElement(_select["default"], {
|
135
145
|
name: "bindType",
|
@@ -143,7 +153,9 @@ function Data(props) {
|
|
143
153
|
value: "none"
|
144
154
|
}, "\u672A\u5173\u8054"), /*#__PURE__*/_react["default"].createElement(Option, {
|
145
155
|
value: "resource"
|
146
|
-
}, "\u5173\u8054\u8D44\u6E90"),
|
156
|
+
}, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(Option, {
|
157
|
+
value: "ip"
|
158
|
+
}, "\u5173\u8054IP"), RelateTopoTree && /*#__PURE__*/_react["default"].createElement(Option, {
|
147
159
|
value: "topo"
|
148
160
|
}, "\u5173\u8054\u62D3\u6251"))), bindType === "resource" && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
|
149
161
|
label: "\u5173\u8054\u8D44\u6E90"
|
@@ -157,7 +169,7 @@ function Data(props) {
|
|
157
169
|
flex: 1,
|
158
170
|
paddingRight: 16,
|
159
171
|
color: "#4D6277",
|
160
|
-
lineHeight:
|
172
|
+
lineHeight: "20px"
|
161
173
|
},
|
162
174
|
title: values.tag ? values.name : null
|
163
175
|
}, values.tag ? values.name : "—"), /*#__PURE__*/_react["default"].createElement(_NodeRelateResourceButton["default"], {
|
@@ -166,13 +178,35 @@ function Data(props) {
|
|
166
178
|
topo: topo,
|
167
179
|
topoEditApi: topoEditApi,
|
168
180
|
nodeBindResourceDrawerComponent: editorProps.nodeBindResourceDrawerComponent
|
169
|
-
}))), bindType === "
|
181
|
+
}))), bindType === "ip" &&
|
182
|
+
/*#__PURE__*/
|
183
|
+
// <Form.Item
|
184
|
+
// label="关联IP"
|
185
|
+
// // style={{ display: "flex" }}
|
186
|
+
// pattern={
|
187
|
+
// /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/
|
188
|
+
// }
|
189
|
+
// patternTrigger="onBlur"
|
190
|
+
// patternMessage="IP地址格式不正确"
|
191
|
+
// >
|
192
|
+
_react["default"].createElement(_BindIpInput["default"], {
|
193
|
+
nodeElement: node,
|
194
|
+
values: values,
|
195
|
+
topo: topo,
|
196
|
+
fieldItem: field,
|
197
|
+
topoEditApi: topoEditApi,
|
198
|
+
placeholder: "\u8BF7\u8F93\u5165",
|
199
|
+
name: "attrObject.bindIp",
|
200
|
+
onChange: _onChange,
|
201
|
+
maxLength: 128
|
202
|
+
}) // </Form.Item>
|
203
|
+
, bindType === "topo" && RelateTopoTree && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
|
170
204
|
label: "\u5173\u8054\u62D3\u6251"
|
171
205
|
}, /*#__PURE__*/_react["default"].createElement(RelateTopoTree, {
|
172
206
|
name: "attrObject.bindTopo",
|
173
207
|
topo: topo,
|
174
208
|
onChange: handleBindTopoChange
|
175
|
-
})), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) ===
|
209
|
+
})), (editorProps === null || editorProps === void 0 ? void 0 : editorProps.topoType) === "cmpTopo" && node.getTag() && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
|
176
210
|
label: "\u6240\u5C5E\u5E73\u53F0"
|
177
211
|
}, /*#__PURE__*/_react["default"].createElement(_PlatformDisplay["default"], props)))));
|
178
212
|
}
|
@@ -30,7 +30,9 @@ var baseLightTheme = {
|
|
30
30
|
'group.title.color': '#4D6277',
|
31
31
|
// 标题文字颜色
|
32
32
|
'group.background': 'rgba(255, 255, 255, 0.9)',
|
33
|
-
'group.border.color': '#E4E9EE'
|
33
|
+
'group.border.color': '#E4E9EE',
|
34
|
+
// 边框颜色
|
35
|
+
'group.splitLine': false // 标题底部边框
|
34
36
|
|
35
37
|
}
|
36
38
|
},
|
@@ -92,7 +94,56 @@ var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
|
|
92
94
|
'group.title.color': '#FFFFFF',
|
93
95
|
// 标题文字颜色
|
94
96
|
'group.background': 'rgba(29,55,113,0.6)',
|
95
|
-
'group.border.color': 'rgba(8,165,244,0.8)'
|
97
|
+
'group.border.color': 'rgba(8,165,244,0.8)',
|
98
|
+
// 边框颜色
|
99
|
+
'group.splitLine': false // 标题底部边框
|
100
|
+
|
101
|
+
}
|
102
|
+
},
|
103
|
+
cluster: {
|
104
|
+
style: {
|
105
|
+
'group.title.color': '#FFFFFF',
|
106
|
+
// 标题文字颜色
|
107
|
+
'group.title.background': 'rgba(14,44,69,1)',
|
108
|
+
// 标题背景颜色 #0E2C45
|
109
|
+
'group.background': 'rgba(14,44,69,1)',
|
110
|
+
// #0E2C45
|
111
|
+
'group.border.color': '#08A5F4',
|
112
|
+
// 边框颜色
|
113
|
+
'group.border.radius': 3
|
114
|
+
}
|
115
|
+
}
|
116
|
+
}, {
|
117
|
+
name: 'poly',
|
118
|
+
label: 'Poly',
|
119
|
+
toolsTheme: 'black',
|
120
|
+
backgroundImage: '/img/topo/themes/poly.png',
|
121
|
+
backgroundImageThumbnail: '/img/topo/themes/poly_thumbnail.png',
|
122
|
+
globalNodeLabelStyle: {
|
123
|
+
color: '#ffffff'
|
124
|
+
},
|
125
|
+
globalEdgeTagStyle: {
|
126
|
+
color: '#E4E9EE',
|
127
|
+
background: 'rgba(6, 54, 88, 1)',
|
128
|
+
// 背景色,不传使用默认内置 @V1.2 index.js:1 #063658
|
129
|
+
borderColor: '#08A5F4' // 边框颜色,不传使用默认内置。用于主题切换 @V1.2
|
130
|
+
|
131
|
+
},
|
132
|
+
text: {
|
133
|
+
color: '#ffffff'
|
134
|
+
},
|
135
|
+
group: {
|
136
|
+
style: {
|
137
|
+
'group.title.background': 'rgba(0,0,0,0.01)',
|
138
|
+
// 标题背景颜色 #08A5F4
|
139
|
+
'group.title.color': '#8FECFF',
|
140
|
+
// 标题文字颜色
|
141
|
+
'group.title.border.color': '#ffffff',
|
142
|
+
// 边框颜色
|
143
|
+
'group.background': 'rgba(0,0,0,0.01)',
|
144
|
+
'group.border.color': '#ffffff',
|
145
|
+
// 边框颜色
|
146
|
+
'group.splitLine': true // 标题底部边框
|
96
147
|
|
97
148
|
}
|
98
149
|
},
|
@@ -2,6 +2,7 @@
|
|
2
2
|
|
3
3
|
exports.__esModule = true;
|
4
4
|
exports.getEdgesBySelection = getEdgesBySelection;
|
5
|
+
exports.isNodeAllEdges = isNodeAllEdges;
|
5
6
|
exports.loopEdgesAndChildren = loopEdgesAndChildren;
|
6
7
|
exports.setEdgesAndChildren = setEdgesAndChildren;
|
7
8
|
exports.setEdgesType = setEdgesType;
|
@@ -52,6 +53,44 @@ function getEdgesBySelection(topo) {
|
|
52
53
|
|
53
54
|
return getSelectedEdges(topo.getGraphView());
|
54
55
|
}
|
56
|
+
/**
|
57
|
+
* 根据选中的线查找对应节点下所有的线是否都选中
|
58
|
+
* @param {*} topo
|
59
|
+
* @param {*} edges
|
60
|
+
* @param {*} operateEdgeFn
|
61
|
+
*/
|
62
|
+
|
63
|
+
|
64
|
+
function isNodeAllEdges(topo) {
|
65
|
+
var selection = topo.getSelectionModel().getSelection().toArray(); // 选中的连线
|
66
|
+
|
67
|
+
var edges = selection.filter(function (element) {
|
68
|
+
return element instanceof ht.Edge;
|
69
|
+
});
|
70
|
+
var inEdges = false;
|
71
|
+
edges.forEach(function (edge) {
|
72
|
+
//根据两边节点查询到所有节点有关的线,过滤出相同的线(两个节点间的线)
|
73
|
+
var sourceNode = edge.getSource();
|
74
|
+
var targetNode = edge.getTarget();
|
75
|
+
var nodeLineList = (0, _htElementUtils.getEdgesBetweenNodes)(sourceNode, targetNode);
|
76
|
+
|
77
|
+
var _loop = function _loop(i) {
|
78
|
+
if (edges.filter(function (edge) {
|
79
|
+
return nodeLineList[i]._id == edge._id;
|
80
|
+
}).length == 0) {
|
81
|
+
inEdges = true;
|
82
|
+
return "break";
|
83
|
+
}
|
84
|
+
};
|
85
|
+
|
86
|
+
for (var i = 0; i < nodeLineList.length; i++) {
|
87
|
+
var _ret = _loop(i);
|
88
|
+
|
89
|
+
if (_ret === "break") break;
|
90
|
+
}
|
91
|
+
});
|
92
|
+
return inEdges;
|
93
|
+
}
|
55
94
|
/**
|
56
95
|
* 遍历连线及子连线
|
57
96
|
* @param {*} topo
|
@@ -17,7 +17,7 @@ var themeMap = [{
|
|
17
17
|
name: 'white',
|
18
18
|
label: '白色',
|
19
19
|
color: null,
|
20
|
-
toolsTheme: '
|
20
|
+
toolsTheme: 'white'
|
21
21
|
}, {
|
22
22
|
name: 'lightblue',
|
23
23
|
label: '蓝色',
|
@@ -35,7 +35,12 @@ var themeMap = [{
|
|
35
35
|
name: 'dark',
|
36
36
|
label: '深色',
|
37
37
|
color: '#031425',
|
38
|
-
toolsTheme: '
|
38
|
+
toolsTheme: 'dark'
|
39
|
+
}, {
|
40
|
+
name: 'poly',
|
41
|
+
label: 'Poly',
|
42
|
+
toolsTheme: 'dark',
|
43
|
+
backgroundImage: '/img/topo/themes/poly.png'
|
39
44
|
}].reduce(function (map, item) {
|
40
45
|
var _extends2;
|
41
46
|
|
@@ -52,12 +57,13 @@ function useCanvasTheme(props) {
|
|
52
57
|
|
53
58
|
var themeConfig = themeMap[themeName || 'white'];
|
54
59
|
var canvasColor = hideBackgroundColor ? null : themeConfig.color;
|
60
|
+
var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
|
55
61
|
(0, _react.useEffect)(function () {
|
56
62
|
// 设置
|
57
63
|
if (graphLoaded && themeConfig) {
|
58
64
|
try {
|
59
65
|
topo.getHtTopo().setTheme(themeName);
|
60
|
-
topo.getHtTopo().setToolsTheme(
|
66
|
+
topo.getHtTopo().setToolsTheme(themeConfig.toolsTheme);
|
61
67
|
} catch (error) {
|
62
68
|
console.error('切换主题失败', error);
|
63
69
|
}
|
@@ -68,12 +74,14 @@ function useCanvasTheme(props) {
|
|
68
74
|
if (graphLoaded) {
|
69
75
|
try {
|
70
76
|
topo.getHtTopo().getGraphView().dm().setBackground(canvasColor);
|
77
|
+
topo.getHtTopo().getGraphView().dm().setBackground(canvasbackgroundImage);
|
71
78
|
} catch (error) {
|
72
79
|
console.error('切换主题失败', error);
|
73
80
|
}
|
74
81
|
}
|
75
82
|
}, [graphLoaded, canvasColor]);
|
76
83
|
return {
|
77
|
-
canvasColor: canvasColor
|
84
|
+
canvasColor: canvasColor,
|
85
|
+
canvasbackgroundImage: canvasbackgroundImage
|
78
86
|
};
|
79
87
|
}
|
@@ -59,7 +59,8 @@ function _default(props) {
|
|
59
59
|
resources: config.resources,
|
60
60
|
groups: config.groups,
|
61
61
|
exportLinkIdList: config.exportLinkIdList,
|
62
|
-
relateTopoIdList: config.relateTopoIdList
|
62
|
+
relateTopoIdList: config.relateTopoIdList //linkIps: config.linkIps,
|
63
|
+
|
63
64
|
};
|
64
65
|
};
|
65
66
|
|