@riil-frontend/component-topology 13.0.0-dev.1 → 13.0.0-dev.11
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 +29 -29
- package/es/components/ColorPanel/index.js +68 -58
- package/es/components/ResourceSelectDrawer/ResourceSelectDrawer.js +1 -1
- package/es/core/components/TopoView/topoView.js +7 -4
- package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +5 -15
- package/es/core/editor/components/Toolbar/widgets/FontColorButton.js +10 -91
- package/es/core/editor/components/Toolbar/widgets/FontFamilyWidget.js +2 -27
- package/es/core/editor/components/Toolbar/widgets/FontSizeWidget.js +3 -28
- package/es/core/editor/components/Toolbar/widgets/FontStyleButton.js +6 -52
- package/es/core/editor/components/Toolbar/widgets/components/FontColorDropdown.js +120 -0
- package/es/core/editor/components/Toolbar/widgets/components/FontFamilySelect.js +29 -0
- package/es/core/editor/components/Toolbar/widgets/components/FontSizeSelect.js +29 -0
- package/es/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js +77 -0
- package/es/core/editor/components/settings/core/updateElementProperty.js +3 -2
- package/es/core/editor/components/settings/propertyViews/view/GlobalEdgeToggle.js +2 -2
- package/es/core/editor/hooks/useKeyboardShortcut.js +4 -0
- package/es/core/editor/hooks/useNewElementTheme.js +20 -16
- package/es/core/editor/utils/edgeTypeStyleUtil.js +11 -32
- package/es/core/hooks/useGraphAlarmDisplay.js +4 -0
- package/es/core/hooks/usePolling.js +2 -1
- package/es/core/hooks/useResourceConfig.js +1 -2
- package/es/core/hooks/useTopoEdit.js +210 -248
- package/es/core/models/AttributeMetricDisplay.js +4 -3
- package/es/core/models/HistoryManager.js +11 -9
- package/es/core/models/TopoApp.js +39 -45
- package/es/core/models/topoData.js +9 -17
- package/es/core/models/utils/linkUtils.js +65 -52
- package/es/core/store/models/topoConfig.js +7 -11
- package/es/core/utils/edgeUtil.js +7 -10
- package/es/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js +2 -2
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +4 -2
- package/es/networkTopo/models/EdgeGroupTagTipBuilder.js +7 -7
- package/es/networkTopo/models/LinkDynamicStyleExecutor.js +7 -63
- package/es/networkTopo/services/topo/basic.js +27 -17
- package/es/networkTopo/utils/__tests__/relateTopoData.js +205 -0
- package/es/networkTopo/utils/edgeGroupTagUtil.js +2 -2
- package/es/networkTopo/utils/exitLinkUtil.js +25 -13
- package/es/networkTopo/utils/relateTopoDataUtil.js +149 -0
- package/es/style.js +1 -1
- package/es/utils/ResourceConfigUtil.js +1 -16
- package/es/utils/clusterUtil.js +3 -3
- package/es/utils/htElementUtils.js +19 -85
- package/lib/components/ColorPanel/index.js +71 -59
- package/lib/components/ResourceSelectDrawer/ResourceSelectDrawer.js +1 -1
- package/lib/core/components/TopoView/topoView.js +15 -19
- package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +5 -14
- package/lib/core/editor/components/Toolbar/widgets/FontColorButton.js +11 -95
- package/lib/core/editor/components/Toolbar/widgets/FontFamilyWidget.js +3 -28
- package/lib/core/editor/components/Toolbar/widgets/FontSizeWidget.js +3 -28
- package/lib/core/editor/components/Toolbar/widgets/FontStyleButton.js +6 -56
- package/lib/core/editor/components/Toolbar/widgets/components/FontColorDropdown.js +136 -0
- package/lib/core/editor/components/Toolbar/widgets/components/FontFamilySelect.js +38 -0
- package/lib/core/editor/components/Toolbar/widgets/components/FontSizeSelect.js +38 -0
- package/lib/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js +89 -0
- package/lib/core/editor/components/settings/core/updateElementProperty.js +7 -2
- package/lib/core/editor/components/settings/propertyViews/view/GlobalEdgeToggle.js +2 -2
- package/lib/core/editor/hooks/useKeyboardShortcut.js +4 -0
- package/lib/core/editor/hooks/useNewElementTheme.js +20 -16
- package/lib/core/editor/utils/edgeTypeStyleUtil.js +10 -33
- package/lib/core/hooks/useGraphAlarmDisplay.js +4 -0
- package/lib/core/hooks/usePolling.js +6 -5
- package/lib/core/hooks/useResourceConfig.js +1 -2
- package/lib/core/hooks/useTopoEdit.js +216 -272
- package/lib/core/models/AttributeMetricDisplay.js +6 -6
- package/lib/core/models/HistoryManager.js +13 -17
- package/lib/core/models/TopoApp.js +39 -43
- package/lib/core/models/topoData.js +9 -17
- package/lib/core/models/utils/linkUtils.js +65 -51
- package/lib/core/store/models/topoConfig.js +13 -25
- package/lib/core/utils/edgeUtil.js +8 -10
- package/lib/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js +3 -2
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +6 -2
- package/lib/networkTopo/models/EdgeGroupTagTipBuilder.js +6 -6
- package/lib/networkTopo/models/LinkDynamicStyleExecutor.js +6 -64
- package/lib/networkTopo/services/topo/basic.js +32 -18
- package/lib/networkTopo/utils/__tests__/relateTopoData.js +210 -0
- package/lib/networkTopo/utils/edgeGroupTagUtil.js +2 -2
- package/lib/networkTopo/utils/exitLinkUtil.js +25 -13
- package/lib/networkTopo/utils/relateTopoDataUtil.js +164 -0
- package/lib/style.js +1 -1
- package/lib/utils/ResourceConfigUtil.js +1 -16
- package/lib/utils/clusterUtil.js +2 -2
- package/lib/utils/htElementUtils.js +22 -94
- package/package.json +2 -2
- package/es/networkTopo/models/LinkTagsTipsBuilder.js +0 -235
- package/lib/networkTopo/models/LinkTagsTipsBuilder.js +0 -245
- /package/es/core/editor/components/Toolbar/widgets/{FontColorButton.module.scss → components/FontColorDropdown.module.scss} +0 -0
- /package/lib/core/editor/components/Toolbar/widgets/{FontColorButton.module.scss → components/FontColorDropdown.module.scss} +0 -0
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import DropdownMenu from "./DropdownMenu";
|
3
|
+
|
4
|
+
function FontFamilySelect(props) {
|
5
|
+
var value = props.value,
|
6
|
+
onChange = props.onChange;
|
7
|
+
var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
|
8
|
+
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
9
|
+
value: (items.includes(value) ? value : null) || '',
|
10
|
+
valueRender: function valueRender(val) {
|
11
|
+
return /*#__PURE__*/React.createElement("div", {
|
12
|
+
style: {
|
13
|
+
width: 48
|
14
|
+
}
|
15
|
+
}, val || '微软雅黑');
|
16
|
+
},
|
17
|
+
onSelect: onChange
|
18
|
+
}, items.map(function (item) {
|
19
|
+
return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
|
20
|
+
key: item
|
21
|
+
}, /*#__PURE__*/React.createElement("div", {
|
22
|
+
style: {
|
23
|
+
fontFamily: item
|
24
|
+
}
|
25
|
+
}, item));
|
26
|
+
}));
|
27
|
+
}
|
28
|
+
|
29
|
+
export default FontFamilySelect;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import DropdownMenu from "./DropdownMenu";
|
3
|
+
|
4
|
+
function FontSizeSelect(props) {
|
5
|
+
var value = props.value,
|
6
|
+
disabled = props.disabled,
|
7
|
+
onChange = props.onChange;
|
8
|
+
var items = [12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 80];
|
9
|
+
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
10
|
+
value: "" + (value || ''),
|
11
|
+
valueRender: function valueRender(val) {
|
12
|
+
return /*#__PURE__*/React.createElement("div", {
|
13
|
+
style: {
|
14
|
+
width: 18
|
15
|
+
}
|
16
|
+
}, val || 20);
|
17
|
+
},
|
18
|
+
disabled: disabled,
|
19
|
+
onSelect: function onSelect(val) {
|
20
|
+
return onChange(parseInt(val, 10));
|
21
|
+
}
|
22
|
+
}, items.map(function (item) {
|
23
|
+
return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
|
24
|
+
key: item
|
25
|
+
}, item);
|
26
|
+
}));
|
27
|
+
}
|
28
|
+
|
29
|
+
export default FontSizeSelect;
|
@@ -0,0 +1,77 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import variables from '@alifd/theme-19926/variables.js';
|
3
|
+
import DropdownMenu from "./DropdownMenu";
|
4
|
+
import Tooltip from "../../components/Tooltip";
|
5
|
+
var items = [{
|
6
|
+
key: 'bold',
|
7
|
+
label: '加粗',
|
8
|
+
icon: 'bold',
|
9
|
+
tooltip: '加粗'
|
10
|
+
}, {
|
11
|
+
key: 'italic',
|
12
|
+
label: '斜体',
|
13
|
+
icon: 'Italics',
|
14
|
+
tooltip: '斜体'
|
15
|
+
}, {
|
16
|
+
key: 'underline',
|
17
|
+
label: '下划线',
|
18
|
+
icon: 'Underline',
|
19
|
+
tooltip: '下划线'
|
20
|
+
}];
|
21
|
+
|
22
|
+
function buildValue(obj) {
|
23
|
+
return Object.keys(obj).filter(function (key) {
|
24
|
+
return !!obj[key];
|
25
|
+
});
|
26
|
+
}
|
27
|
+
|
28
|
+
var fields = ['bold', 'italic', 'underline'];
|
29
|
+
|
30
|
+
function FontStyleSelect(props) {
|
31
|
+
var value = props.value,
|
32
|
+
disabled = props.disabled,
|
33
|
+
onChange = props.onChange,
|
34
|
+
_props$fieldDisabled = props.fieldDisabled,
|
35
|
+
fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
|
36
|
+
hideItemTootip = props.hideItemTootip;
|
37
|
+
|
38
|
+
var renderMenuItemContent = function renderMenuItemContent(item) {
|
39
|
+
return /*#__PURE__*/React.createElement("div", {
|
40
|
+
style: {
|
41
|
+
display: 'flex',
|
42
|
+
alignItems: 'center'
|
43
|
+
}
|
44
|
+
}, /*#__PURE__*/React.createElement("img", {
|
45
|
+
src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
|
46
|
+
alt: ""
|
47
|
+
}), /*#__PURE__*/React.createElement("span", {
|
48
|
+
style: fieldDisabled[item.key] ? {} : {
|
49
|
+
color: variables['$color-text1-4']
|
50
|
+
}
|
51
|
+
}, item.label));
|
52
|
+
};
|
53
|
+
|
54
|
+
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
55
|
+
value: value,
|
56
|
+
valueRender: function valueRender() {
|
57
|
+
return /*#__PURE__*/React.createElement("img", {
|
58
|
+
src: "/img/topo/editor/toolbar/bold/" + (disabled ? 'Disable' : 'Normal') + ".svg",
|
59
|
+
alt: ""
|
60
|
+
});
|
61
|
+
},
|
62
|
+
multiple: true,
|
63
|
+
disabled: disabled,
|
64
|
+
onSelect: onChange
|
65
|
+
}, items.map(function (item) {
|
66
|
+
return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
|
67
|
+
key: item.key,
|
68
|
+
disabled: !!fieldDisabled[item.key]
|
69
|
+
}, hideItemTootip ? renderMenuItemContent(item) : /*#__PURE__*/React.createElement(Tooltip, {
|
70
|
+
trigger: renderMenuItemContent(item),
|
71
|
+
align: "r",
|
72
|
+
popupStyle: {}
|
73
|
+
}, item.tooltip));
|
74
|
+
}));
|
75
|
+
}
|
76
|
+
|
77
|
+
export default FontStyleSelect;
|
@@ -1,7 +1,8 @@
|
|
1
|
+
import Logger from 'loglevel';
|
2
|
+
var rlog = Logger.getLogger('topo');
|
1
3
|
export default function updateElementProperty(topo, name, value) {
|
2
|
-
// const element = topo.getDataModel().getDataById(selection[0].id);
|
3
4
|
var element = topo.getSelectionModel().getFirstData();
|
4
|
-
|
5
|
+
rlog.debug("updateElementProperty. ", {
|
5
6
|
element: element,
|
6
7
|
name: name,
|
7
8
|
value: value
|
@@ -23,13 +23,13 @@ function GlobalEdgeToggle(props) {
|
|
23
23
|
topo: topo,
|
24
24
|
showType: 4
|
25
25
|
});
|
26
|
-
topo.getHtTopo().
|
26
|
+
topo.getHtTopo().toggleAllEdgeGroups(true);
|
27
27
|
} else {
|
28
28
|
showLinkByConfig({
|
29
29
|
topo: topo,
|
30
30
|
showType: 1
|
31
31
|
});
|
32
|
-
topo.getHtTopo().
|
32
|
+
topo.getHtTopo().toggleAllEdgeGroups(false);
|
33
33
|
}
|
34
34
|
|
35
35
|
displayConfigDispatchers.update({
|
@@ -16,26 +16,30 @@ function useNewElementTheme(props) {
|
|
16
16
|
inited = true;
|
17
17
|
}
|
18
18
|
|
19
|
-
function
|
20
|
-
var
|
21
|
-
data = e.data;
|
19
|
+
function handleAddElement(e) {
|
20
|
+
var data = e.data; // 设置主题样式
|
22
21
|
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
return item.name === theme;
|
29
|
-
});
|
22
|
+
var displayConfig = topo.store.getModelState('displayConfig');
|
23
|
+
var theme = displayConfig.canvasTheme || 'white';
|
24
|
+
var themeConfig = THEMES.find(function (item) {
|
25
|
+
return item.name === theme;
|
26
|
+
});
|
30
27
|
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
28
|
+
var _ThemeUtil = ThemeUtil({
|
29
|
+
topo: topo
|
30
|
+
}),
|
31
|
+
setElementTheme = _ThemeUtil.setElementTheme;
|
35
32
|
|
36
|
-
|
33
|
+
setElementTheme(data, themeConfig); // 临时放这里,新加入节点按配置显示隐藏名称
|
34
|
+
|
35
|
+
setNewNodeNameVisible(topo, data);
|
36
|
+
}
|
37
37
|
|
38
|
-
|
38
|
+
function handleDataModelChangeListener(e) {
|
39
|
+
var kind = e.kind;
|
40
|
+
|
41
|
+
if (kind === 'add') {
|
42
|
+
handleAddElement(e);
|
39
43
|
}
|
40
44
|
}
|
41
45
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { getEdges, getEdgesBetweenNodes } from "../../../utils/htElementUtils";
|
1
|
+
import { getEdges, getEdgesBetweenNodes, isEdgeVisible } from "../../../utils/htElementUtils";
|
2
2
|
var ht = window.ht;
|
3
3
|
export function getEdgesBySelection(topo) {
|
4
4
|
var getChildrenNodeIds = function getChildrenNodeIds(nodes) {
|
@@ -14,6 +14,14 @@ export function getEdgesBySelection(topo) {
|
|
14
14
|
return nodeIds;
|
15
15
|
};
|
16
16
|
|
17
|
+
function getVisibleEdgesInNodes(gv, nodes) {
|
18
|
+
var nodeIds = getChildrenNodeIds(nodes);
|
19
|
+
var dm = gv.getDataModel();
|
20
|
+
return getEdges(dm).filter(function (edge) {
|
21
|
+
return nodeIds.includes(edge.getSource().getId()) && nodeIds.includes(edge.getTarget().getId());
|
22
|
+
}).filter(isEdgeVisible);
|
23
|
+
}
|
24
|
+
|
17
25
|
var getSelectedEdges = function getSelectedEdges(gv) {
|
18
26
|
var selection = gv.getSelectionModel().getSelection().toArray(); // 选中的连线
|
19
27
|
|
@@ -24,14 +32,8 @@ export function getEdgesBySelection(topo) {
|
|
24
32
|
var nodes = selection.filter(function (element) {
|
25
33
|
return element instanceof ht.Node;
|
26
34
|
});
|
27
|
-
|
28
|
-
|
29
|
-
getEdges(dm).forEach(function (edge) {
|
30
|
-
if (nodeIds.find(function (nodeId) {
|
31
|
-
return nodeId === edge.getSource().getId();
|
32
|
-
}) && nodeIds.find(function (nodeId) {
|
33
|
-
return nodeId === edge.getTarget().getId();
|
34
|
-
}) && !edges.find(function (item) {
|
35
|
+
getVisibleEdgesInNodes(gv, nodes).forEach(function (edge) {
|
36
|
+
if (!edges.find(function (item) {
|
35
37
|
return item === edge;
|
36
38
|
})) {
|
37
39
|
edges.push(edge);
|
@@ -77,29 +79,6 @@ export function isNodeAllEdges(topo) {
|
|
77
79
|
});
|
78
80
|
return inEdges;
|
79
81
|
}
|
80
|
-
/**
|
81
|
-
* 遍历连线及子连线
|
82
|
-
* @param {*} topo
|
83
|
-
* @param {*} edges
|
84
|
-
* @param {*} operateEdgeFn
|
85
|
-
*/
|
86
|
-
|
87
|
-
export function loopEdgesAndChildren(topo, edges, operateEdgeFn) {
|
88
|
-
var htTopo = topo.getHtTopo();
|
89
|
-
edges.forEach(function (edge) {
|
90
|
-
operateEdgeFn(edge);
|
91
|
-
|
92
|
-
if (edge.isEdgeGroupAgent()) {
|
93
|
-
// 连线组折叠时同时设置子连线
|
94
|
-
var edgeChildren = edge.getEdgeGroup().getEdges().toArray();
|
95
|
-
htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), true);
|
96
|
-
edgeChildren.forEach(function (edgeChild) {
|
97
|
-
operateEdgeFn(edgeChild);
|
98
|
-
});
|
99
|
-
htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), false);
|
100
|
-
}
|
101
|
-
});
|
102
|
-
}
|
103
82
|
/**
|
104
83
|
* 设置连线及子连线。带回退事务控制
|
105
84
|
* @param {*} topo
|
@@ -126,6 +126,8 @@ export default function useGraphAlarmDisplay(options) {
|
|
126
126
|
});
|
127
127
|
|
128
128
|
function showAlarm() {
|
129
|
+
var _topo$historyManager, _topo$historyManager2;
|
130
|
+
|
129
131
|
if (!graphLoaded) {
|
130
132
|
return;
|
131
133
|
}
|
@@ -156,7 +158,9 @@ export default function useGraphAlarmDisplay(options) {
|
|
156
158
|
relateTopoAlarms: relateTopoAlarms
|
157
159
|
}); // 更新到ht拓扑
|
158
160
|
|
161
|
+
(_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, '推送告警');
|
159
162
|
topo.view.loadAlarm(elementsAlarmLevels);
|
163
|
+
(_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, '推送告警');
|
160
164
|
}
|
161
165
|
|
162
166
|
return function () {
|
@@ -4,11 +4,12 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
4
4
|
import { useEffect } from 'react';
|
5
5
|
import { useRequest } from 'ahooks';
|
6
6
|
import _ from 'lodash';
|
7
|
-
import
|
7
|
+
import Logger from 'loglevel';
|
8
8
|
import { useCbbEventListener } from '@riil-frontend/component-riil-event-emitter';
|
9
9
|
import DictCache from "../models/cache/DictCache";
|
10
10
|
import useCiAttributeChange from "./useCiAttributeChange";
|
11
11
|
import useHtDataPropertyChangeListener from "./ht/useHtDataPropertyChangeListener";
|
12
|
+
var rlog = Logger.getLogger('topo');
|
12
13
|
/**
|
13
14
|
* 轮询获取指标hooks
|
14
15
|
* @param {*} props
|