@riil-frontend/component-topology 12.0.1 → 12.1.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 (55) hide show
  1. package/build/1.js +1 -1
  2. package/build/index.js +14 -14
  3. package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
  4. package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +5 -15
  5. package/es/core/editor/components/Toolbar/widgets/FontFamilyWidget.js +2 -27
  6. package/es/core/editor/components/Toolbar/widgets/FontSizeWidget.js +3 -28
  7. package/es/core/editor/components/Toolbar/widgets/FontStyleButton.js +6 -52
  8. package/es/core/editor/components/Toolbar/widgets/components/FontFamilySelect.js +29 -0
  9. package/es/core/editor/components/Toolbar/widgets/components/FontSizeSelect.js +29 -0
  10. package/es/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js +71 -0
  11. package/es/core/editor/components/settings/propertyViews/view/GlobalEdgeToggle.js +2 -2
  12. package/es/core/editor/hooks/useNewElementTheme.js +20 -16
  13. package/es/core/editor/utils/edgeTypeStyleUtil.js +11 -32
  14. package/es/core/hooks/usePolling.js +2 -1
  15. package/es/core/hooks/useTopoEdit.js +169 -235
  16. package/es/core/models/AttributeMetricDisplay.js +2 -1
  17. package/es/core/models/HistoryManager.js +11 -9
  18. package/es/core/models/TopoApp.js +23 -31
  19. package/es/core/models/utils/linkUtils.js +36 -28
  20. package/es/core/store/models/topoConfig.js +2 -1
  21. package/es/core/utils/edgeUtil.js +7 -10
  22. package/es/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js +2 -2
  23. package/es/networkTopo/models/EdgeGroupTagTipBuilder.js +7 -7
  24. package/es/networkTopo/models/LinkDynamicStyleExecutor.js +7 -63
  25. package/es/networkTopo/utils/edgeGroupTagUtil.js +2 -2
  26. package/es/utils/clusterUtil.js +3 -3
  27. package/es/utils/htElementUtils.js +16 -84
  28. package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
  29. package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +5 -14
  30. package/lib/core/editor/components/Toolbar/widgets/FontFamilyWidget.js +3 -28
  31. package/lib/core/editor/components/Toolbar/widgets/FontSizeWidget.js +3 -28
  32. package/lib/core/editor/components/Toolbar/widgets/FontStyleButton.js +6 -56
  33. package/lib/core/editor/components/Toolbar/widgets/components/FontFamilySelect.js +38 -0
  34. package/lib/core/editor/components/Toolbar/widgets/components/FontSizeSelect.js +38 -0
  35. package/lib/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js +83 -0
  36. package/lib/core/editor/components/settings/propertyViews/view/GlobalEdgeToggle.js +2 -2
  37. package/lib/core/editor/hooks/useNewElementTheme.js +20 -16
  38. package/lib/core/editor/utils/edgeTypeStyleUtil.js +10 -33
  39. package/lib/core/hooks/usePolling.js +6 -5
  40. package/lib/core/hooks/useTopoEdit.js +177 -261
  41. package/lib/core/models/AttributeMetricDisplay.js +6 -6
  42. package/lib/core/models/HistoryManager.js +13 -17
  43. package/lib/core/models/TopoApp.js +22 -29
  44. package/lib/core/models/utils/linkUtils.js +36 -27
  45. package/lib/core/store/models/topoConfig.js +9 -16
  46. package/lib/core/utils/edgeUtil.js +8 -10
  47. package/lib/core/viewer/components/plugins/ElementDetailDrawer/hooks/useElementDetailManager.js +3 -2
  48. package/lib/networkTopo/models/EdgeGroupTagTipBuilder.js +6 -6
  49. package/lib/networkTopo/models/LinkDynamicStyleExecutor.js +6 -64
  50. package/lib/networkTopo/utils/edgeGroupTagUtil.js +2 -2
  51. package/lib/utils/clusterUtil.js +2 -2
  52. package/lib/utils/htElementUtils.js +19 -93
  53. package/package.json +2 -2
  54. package/es/networkTopo/models/LinkTagsTipsBuilder.js +0 -235
  55. package/lib/networkTopo/models/LinkTagsTipsBuilder.js +0 -245
@@ -36,14 +36,14 @@ function EdgeColorButton(props) {
36
36
  });
37
37
  };
38
38
 
39
- var getLines = function getLines(list) {
39
+ var getCustomLines = function getCustomLines(list) {
40
40
  return list.filter(isCustomEdge);
41
41
  };
42
42
 
43
43
  useEffect(function () {
44
44
  if (graphLoaded) {
45
45
  var edges = getEdgesBySelection(topo);
46
- var list = getLines(edges);
46
+ var list = getCustomLines(edges);
47
47
  setLineWidth(1); // eslint-disable-next-line eqeqeq
48
48
 
49
49
  if (selection.length == 1 && list.length === 1) {
@@ -32,21 +32,11 @@ var LINE_TYPE_OPTIONS = [{
32
32
  value: 'doublearc',
33
33
  label: '双弧线',
34
34
  icon: 'topo_linear_icon_arcline'
35
- } // {
36
- // value: 'points',
37
- // label: '自由线形',
38
- // icon: 'topo_linear_icon_pointsline',
39
- // },
40
- ];
41
-
42
- if (localStorage.getItem('topo.test.edge.customType') === 'true') {
43
- LINE_TYPE_OPTIONS.push({
44
- value: 'points',
45
- label: '自由线形',
46
- icon: 'topo_linear_icon_pointsline'
47
- });
48
- }
49
-
35
+ }, {
36
+ value: 'points',
37
+ label: '自由线形',
38
+ icon: 'topo_linear_icon_pointsline'
39
+ }];
50
40
  var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
51
41
  var value = props.value,
52
42
  onChange = props.onChange,
@@ -1,33 +1,8 @@
1
1
  import React, { useState, useEffect } from 'react';
2
- import DropdownMenu from "./components/DropdownMenu";
3
- import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
2
+ import FontFamilySelect from "./components/FontFamilySelect";
3
+ import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter";
4
4
  import WidgetBox from "./WidgetBox";
5
5
 
6
- function FontFamilySelect(props) {
7
- var value = props.value,
8
- onChange = props.onChange;
9
- var items = ['宋体', '微软雅黑', '黑体', 'Arial'];
10
- return /*#__PURE__*/React.createElement(DropdownMenu, {
11
- value: (items.includes(value) ? value : null) || '',
12
- valueRender: function valueRender(val) {
13
- return /*#__PURE__*/React.createElement("div", {
14
- style: {
15
- width: 48
16
- }
17
- }, val || '微软雅黑');
18
- },
19
- onSelect: onChange
20
- }, items.map(function (item) {
21
- return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
22
- key: item
23
- }, /*#__PURE__*/React.createElement("div", {
24
- style: {
25
- fontFamily: item
26
- }
27
- }, item));
28
- }));
29
- }
30
-
31
6
  function FontFamilyWidget(props) {
32
7
  var topo = props.topo,
33
8
  showLabel = props.showLabel,
@@ -1,33 +1,8 @@
1
- import React, { useEffect, useState } from 'react';
2
- import DropdownMenu from "./components/DropdownMenu";
3
- import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
1
+ import React, { useEffect } from 'react';
2
+ import FontSizeSelect from "./components/FontSizeSelect";
3
+ import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter";
4
4
  import WidgetBox from "./WidgetBox";
5
5
 
6
- function FontSizeSelect(props) {
7
- var value = props.value,
8
- disabled = props.disabled,
9
- onChange = props.onChange;
10
- var items = [12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 80];
11
- return /*#__PURE__*/React.createElement(DropdownMenu, {
12
- value: "" + (value || ''),
13
- valueRender: function valueRender(val) {
14
- return /*#__PURE__*/React.createElement("div", {
15
- style: {
16
- width: 18
17
- }
18
- }, val || 20);
19
- },
20
- disabled: disabled,
21
- onSelect: function onSelect(val) {
22
- return onChange(parseInt(val, 10));
23
- }
24
- }, items.map(function (item) {
25
- return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
26
- key: item
27
- }, item);
28
- }));
29
- }
30
-
31
6
  function FontSizeWidget(props) {
32
7
  var topo = props.topo,
33
8
  showLabel = props.showLabel,
@@ -1,26 +1,7 @@
1
1
  import React, { useState, useEffect } from 'react';
2
- import variables from '@alifd/theme-19926/variables.js';
3
- import { isText } from "../../../../../utils/htElementUtils";
4
- import DropdownMenu from "./components/DropdownMenu";
5
- import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
2
+ import FontStyleSelect from "./components/FontStyleSelect";
3
+ import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter";
6
4
  import WidgetBox from "./WidgetBox";
7
- import Tooltip from "../components/Tooltip";
8
- var items = [{
9
- key: 'bold',
10
- label: '加粗',
11
- icon: 'bold',
12
- tooltip: '加粗'
13
- }, {
14
- key: 'italic',
15
- label: '斜体',
16
- icon: 'Italics',
17
- tooltip: '斜体'
18
- }, {
19
- key: 'underline',
20
- label: '下划线',
21
- icon: 'Underline',
22
- tooltip: '下划线'
23
- }];
24
5
 
25
6
  function buildValue(obj) {
26
7
  return Object.keys(obj).filter(function (key) {
@@ -89,39 +70,12 @@ function FontStyleButton(props) {
89
70
  tooltip: "\u6587\u5B57\u6837\u5F0F\uFF08\u52A0\u7C97\u3001\u659C\u4F53\u3001\u4E0B\u5212\u7EBF\uFF09",
90
71
  disabled: disabled,
91
72
  showLabel: showLabel
92
- }, /*#__PURE__*/React.createElement(DropdownMenu, {
73
+ }, /*#__PURE__*/React.createElement(FontStyleSelect, {
93
74
  value: value,
94
- valueRender: function valueRender() {
95
- return /*#__PURE__*/React.createElement("img", {
96
- src: "/img/topo/editor/toolbar/bold/" + (disabled ? 'Disable' : 'Normal') + ".svg",
97
- alt: ""
98
- });
99
- },
100
- multiple: true,
101
75
  disabled: disabled,
102
- onSelect: handleSelect
103
- }, items.map(function (item) {
104
- return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
105
- key: item.key,
106
- disabled: fieldDisabled[item.key]
107
- }, /*#__PURE__*/React.createElement(Tooltip, {
108
- trigger: /*#__PURE__*/React.createElement("div", {
109
- style: {
110
- display: 'flex',
111
- alignItems: 'center'
112
- }
113
- }, /*#__PURE__*/React.createElement("img", {
114
- src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
115
- alt: ""
116
- }), /*#__PURE__*/React.createElement("span", {
117
- style: fieldDisabled[item.key] ? {} : {
118
- color: variables['$color-text1-4']
119
- }
120
- }, item.label)),
121
- align: "r",
122
- popupStyle: {}
123
- }, item.tooltip));
124
- })));
76
+ fieldDisabled: fieldDisabled,
77
+ onChange: handleSelect
78
+ }));
125
79
  }
126
80
 
127
81
  export default textStyleSettingRouter(FontStyleButton, {
@@ -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,71 @@
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
+ return /*#__PURE__*/React.createElement(DropdownMenu, {
37
+ value: value,
38
+ valueRender: function valueRender() {
39
+ return /*#__PURE__*/React.createElement("img", {
40
+ src: "/img/topo/editor/toolbar/bold/" + (disabled ? 'Disable' : 'Normal') + ".svg",
41
+ alt: ""
42
+ });
43
+ },
44
+ multiple: true,
45
+ disabled: disabled,
46
+ onSelect: onChange
47
+ }, items.map(function (item) {
48
+ return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
49
+ key: item.key,
50
+ disabled: !!fieldDisabled[item.key]
51
+ }, /*#__PURE__*/React.createElement(Tooltip, {
52
+ trigger: /*#__PURE__*/React.createElement("div", {
53
+ style: {
54
+ display: 'flex',
55
+ alignItems: 'center'
56
+ }
57
+ }, /*#__PURE__*/React.createElement("img", {
58
+ src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
59
+ alt: ""
60
+ }), /*#__PURE__*/React.createElement("span", {
61
+ style: fieldDisabled[item.key] ? {} : {
62
+ color: variables['$color-text1-4']
63
+ }
64
+ }, item.label)),
65
+ align: "r",
66
+ popupStyle: {}
67
+ }, item.tooltip));
68
+ }));
69
+ }
70
+
71
+ export default FontStyleSelect;
@@ -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({
@@ -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
@@ -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