@riil-frontend/component-topology 13.0.0-dev.1 → 13.0.0-dev.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/build/1.js +1 -1
  2. package/build/index.css +1 -1
  3. package/build/index.js +29 -29
  4. package/es/components/ColorPanel/index.js +68 -58
  5. package/es/components/ResourceSelectDrawer/ResourceSelectDrawer.js +1 -1
  6. package/es/core/components/TopoView/topoView.js +7 -4
  7. package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
  8. package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +5 -15
  9. package/es/core/editor/components/Toolbar/widgets/FontColorButton.js +10 -91
  10. package/es/core/editor/components/Toolbar/widgets/FontFamilyWidget.js +2 -27
  11. package/es/core/editor/components/Toolbar/widgets/FontSizeWidget.js +3 -28
  12. package/es/core/editor/components/Toolbar/widgets/FontStyleButton.js +6 -52
  13. package/es/core/editor/components/Toolbar/widgets/components/FontColorDropdown.js +120 -0
  14. package/es/core/editor/components/Toolbar/widgets/components/FontFamilySelect.js +29 -0
  15. package/es/core/editor/components/Toolbar/widgets/components/FontSizeSelect.js +29 -0
  16. package/es/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js +77 -0
  17. package/es/core/editor/components/settings/core/updateElementProperty.js +3 -2
  18. package/es/core/editor/components/settings/propertyViews/view/GlobalEdgeToggle.js +2 -2
  19. package/es/core/editor/hooks/useKeyboardShortcut.js +4 -0
  20. package/es/core/editor/hooks/useNewElementTheme.js +20 -16
  21. package/es/core/editor/utils/edgeTypeStyleUtil.js +11 -32
  22. package/es/core/hooks/useGraphAlarmDisplay.js +4 -0
  23. package/es/core/hooks/usePolling.js +2 -1
  24. package/es/core/hooks/useResourceConfig.js +1 -2
  25. package/es/core/hooks/useTopoEdit.js +210 -248
  26. package/es/core/models/AttributeMetricDisplay.js +4 -3
  27. package/es/core/models/HistoryManager.js +11 -9
  28. package/es/core/models/TopoApp.js +39 -45
  29. package/es/core/models/topoData.js +9 -17
  30. package/es/core/models/utils/linkUtils.js +65 -52
  31. package/es/core/store/models/topoConfig.js +7 -11
  32. package/es/core/utils/edgeUtil.js +7 -10
  33. package/es/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js +2 -2
  34. package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +4 -2
  35. package/es/networkTopo/models/EdgeGroupTagTipBuilder.js +7 -7
  36. package/es/networkTopo/models/LinkDynamicStyleExecutor.js +7 -63
  37. package/es/networkTopo/services/topo/basic.js +27 -17
  38. package/es/networkTopo/utils/__tests__/relateTopoData.js +205 -0
  39. package/es/networkTopo/utils/edgeGroupTagUtil.js +2 -2
  40. package/es/networkTopo/utils/exitLinkUtil.js +25 -13
  41. package/es/networkTopo/utils/relateTopoDataUtil.js +149 -0
  42. package/es/style.js +1 -1
  43. package/es/utils/ResourceConfigUtil.js +1 -16
  44. package/es/utils/clusterUtil.js +3 -3
  45. package/es/utils/htElementUtils.js +19 -85
  46. package/lib/components/ColorPanel/index.js +71 -59
  47. package/lib/components/ResourceSelectDrawer/ResourceSelectDrawer.js +1 -1
  48. package/lib/core/components/TopoView/topoView.js +15 -19
  49. package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
  50. package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +5 -14
  51. package/lib/core/editor/components/Toolbar/widgets/FontColorButton.js +11 -95
  52. package/lib/core/editor/components/Toolbar/widgets/FontFamilyWidget.js +3 -28
  53. package/lib/core/editor/components/Toolbar/widgets/FontSizeWidget.js +3 -28
  54. package/lib/core/editor/components/Toolbar/widgets/FontStyleButton.js +6 -56
  55. package/lib/core/editor/components/Toolbar/widgets/components/FontColorDropdown.js +136 -0
  56. package/lib/core/editor/components/Toolbar/widgets/components/FontFamilySelect.js +38 -0
  57. package/lib/core/editor/components/Toolbar/widgets/components/FontSizeSelect.js +38 -0
  58. package/lib/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js +89 -0
  59. package/lib/core/editor/components/settings/core/updateElementProperty.js +7 -2
  60. package/lib/core/editor/components/settings/propertyViews/view/GlobalEdgeToggle.js +2 -2
  61. package/lib/core/editor/hooks/useKeyboardShortcut.js +4 -0
  62. package/lib/core/editor/hooks/useNewElementTheme.js +20 -16
  63. package/lib/core/editor/utils/edgeTypeStyleUtil.js +10 -33
  64. package/lib/core/hooks/useGraphAlarmDisplay.js +4 -0
  65. package/lib/core/hooks/usePolling.js +6 -5
  66. package/lib/core/hooks/useResourceConfig.js +1 -2
  67. package/lib/core/hooks/useTopoEdit.js +216 -272
  68. package/lib/core/models/AttributeMetricDisplay.js +6 -6
  69. package/lib/core/models/HistoryManager.js +13 -17
  70. package/lib/core/models/TopoApp.js +39 -43
  71. package/lib/core/models/topoData.js +9 -17
  72. package/lib/core/models/utils/linkUtils.js +65 -51
  73. package/lib/core/store/models/topoConfig.js +13 -25
  74. package/lib/core/utils/edgeUtil.js +8 -10
  75. package/lib/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js +3 -2
  76. package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +6 -2
  77. package/lib/networkTopo/models/EdgeGroupTagTipBuilder.js +6 -6
  78. package/lib/networkTopo/models/LinkDynamicStyleExecutor.js +6 -64
  79. package/lib/networkTopo/services/topo/basic.js +32 -18
  80. package/lib/networkTopo/utils/__tests__/relateTopoData.js +210 -0
  81. package/lib/networkTopo/utils/edgeGroupTagUtil.js +2 -2
  82. package/lib/networkTopo/utils/exitLinkUtil.js +25 -13
  83. package/lib/networkTopo/utils/relateTopoDataUtil.js +164 -0
  84. package/lib/style.js +1 -1
  85. package/lib/utils/ResourceConfigUtil.js +1 -16
  86. package/lib/utils/clusterUtil.js +2 -2
  87. package/lib/utils/htElementUtils.js +22 -94
  88. package/package.json +2 -2
  89. package/es/networkTopo/models/LinkTagsTipsBuilder.js +0 -235
  90. package/lib/networkTopo/models/LinkTagsTipsBuilder.js +0 -245
  91. /package/es/core/editor/components/Toolbar/widgets/{FontColorButton.module.scss → components/FontColorDropdown.module.scss} +0 -0
  92. /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
- console.info("updateElementProperty", topo.getSelectionModel().getSelection(), {
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().expandAllEdgeGroups();
26
+ topo.getHtTopo().toggleAllEdgeGroups(true);
27
27
  } else {
28
28
  showLinkByConfig({
29
29
  topo: topo,
30
30
  showType: 1
31
31
  });
32
- topo.getHtTopo().collapseAllEdgeGroups();
32
+ topo.getHtTopo().toggleAllEdgeGroups(false);
33
33
  }
34
34
 
35
35
  displayConfigDispatchers.update({
@@ -25,6 +25,10 @@ function initKeyboardShortcuts(props) {
25
25
 
26
26
  hotkeys('ctrl+v, command+v', function (event) {
27
27
  return handlePasteHotkey(event, props);
28
+ }); // 删除
29
+
30
+ hotkeys('delete', function (event) {
31
+ topoEdit.batchDeleteSelectedElement();
28
32
  });
29
33
  }
30
34
 
@@ -16,26 +16,30 @@ function useNewElementTheme(props) {
16
16
  inited = true;
17
17
  }
18
18
 
19
- function handleDataModelChangeListener(e) {
20
- var kind = e.kind,
21
- data = e.data;
19
+ function handleAddElement(e) {
20
+ var data = e.data; // 设置主题样式
22
21
 
23
- if (kind === 'add') {
24
- // 设置主题样式
25
- var displayConfig = topo.store.getModelState('displayConfig');
26
- var theme = displayConfig.canvasTheme || 'white';
27
- var themeConfig = THEMES.find(function (item) {
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
- var _ThemeUtil2 = ThemeUtil({
32
- topo: topo
33
- }),
34
- setElementTheme = _ThemeUtil2.setElementTheme;
28
+ var _ThemeUtil = ThemeUtil({
29
+ topo: topo
30
+ }),
31
+ setElementTheme = _ThemeUtil.setElementTheme;
35
32
 
36
- setElementTheme(data, themeConfig); // 临时放这里,新加入节点按配置显示隐藏名称
33
+ setElementTheme(data, themeConfig); // 临时放这里,新加入节点按配置显示隐藏名称
34
+
35
+ setNewNodeNameVisible(topo, data);
36
+ }
37
37
 
38
- setNewNodeNameVisible(topo, data);
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
- var nodeIds = getChildrenNodeIds(nodes);
28
- var dm = gv.getDataModel();
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 { rlog } from '@riil-frontend/component-topology-utils';
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
@@ -41,8 +41,7 @@ export default function (props) {
41
41
  var config = getConfigFromHt();
42
42
  return {
43
43
  resources: config.resources,
44
- groups: config.groups,
45
- relateTopoIdList: config.relateTopoIdList
44
+ groups: config.groups
46
45
  };
47
46
  };
48
47