@riil-frontend/component-topology 9.0.0-a.9 → 9.0.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 +2 -2
- package/build/2.js +1 -1
- package/build/index.css +1 -1
- package/build/index.js +18 -18
- 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 +91 -79
- 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 +164 -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 +87 -79
- 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 +174 -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
|
|