@riil-frontend/component-topology 6.0.0-alpha.35 → 6.0.0-alpha.37

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 (35) hide show
  1. package/build/index.css +1 -1
  2. package/build/index.js +1 -1
  3. package/es/components/ColorPanel/components/ColorBlock/index.module.scss +1 -0
  4. package/es/components/ColorPanel/components/FontColorRange/index.module.scss +3 -4
  5. package/es/components/ColorPanel/index.module.scss +4 -3
  6. package/es/core/components/TopoView/GraphViewPanel.js +1 -0
  7. package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +10 -67
  8. package/es/core/editor/components/Sidebar/views/CanvasPanel/themes.js +42 -0
  9. package/es/core/editor/components/Sidebar/views/CanvasPanel/useCanvasThemeConfig.js +116 -0
  10. package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/Content.js +12 -3
  11. package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
  12. package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.js +11 -31
  13. package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss +11 -6
  14. package/es/core/editor/components/settings/common/AlignSetting/AlignSetting.module.scss +3 -2
  15. package/es/core/editor/components/settings/common/AlignSetting/AlignTypeList.js +34 -30
  16. package/es/core/editor/components/settings/common/AlignSetting/index.js +3 -3
  17. package/es/core/hooks/useCanvasTheme.js +26 -12
  18. package/es/core/models/TopoApp.js +1 -1
  19. package/lib/components/ColorPanel/components/ColorBlock/index.module.scss +1 -0
  20. package/lib/components/ColorPanel/components/FontColorRange/index.module.scss +3 -4
  21. package/lib/components/ColorPanel/index.module.scss +4 -3
  22. package/lib/core/components/TopoView/GraphViewPanel.js +1 -0
  23. package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +11 -66
  24. package/lib/core/editor/components/Sidebar/views/CanvasPanel/themes.js +47 -0
  25. package/lib/core/editor/components/Sidebar/views/CanvasPanel/useCanvasThemeConfig.js +128 -0
  26. package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/Content.js +12 -3
  27. package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
  28. package/lib/core/editor/components/Toolbar/widgets/NodeAlignWidget.js +11 -31
  29. package/lib/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss +11 -6
  30. package/lib/core/editor/components/settings/common/AlignSetting/AlignSetting.module.scss +3 -2
  31. package/lib/core/editor/components/settings/common/AlignSetting/AlignTypeList.js +33 -29
  32. package/lib/core/editor/components/settings/common/AlignSetting/index.js +3 -3
  33. package/lib/core/hooks/useCanvasTheme.js +26 -12
  34. package/lib/core/models/TopoApp.js +1 -1
  35. package/package.json +2 -2
@@ -5,4 +5,5 @@
5
5
  height: 25px;
6
6
  border-radius: 50%;
7
7
  border: 1px solid;
8
+ cursor: pointer;
8
9
  }
@@ -4,15 +4,14 @@
4
4
  .content {
5
5
  display: flex;
6
6
  flex-direction: row;
7
- width: 84%;
8
- margin-left: 6%;
9
- overflow: hidden;
7
+ flex:1;
8
+ margin-left: 22px;
10
9
  .range {
11
10
  flex: 1;
12
11
  }
13
12
 
14
13
  .unit {
15
- margin-left: 10px;
14
+ margin-left: 14px;
16
15
  }
17
16
 
18
17
  :global {
@@ -1,13 +1,13 @@
1
1
  @import '~@alifd/next/variables.scss';
2
2
 
3
3
  .content{
4
- width: 210px;
4
+ width: 201px;
5
5
  .ul{
6
6
  width: 100%;
7
7
  .li{
8
8
  display: inline-block;
9
- width: 34.6px;
10
- line-height: 40px;
9
+ width: 33px;
10
+ line-height: 38px;
11
11
  .liBox{
12
12
  width: 31px;
13
13
  height: 31px;
@@ -31,4 +31,5 @@
31
31
  height: 25px;
32
32
  border-radius: 50%;
33
33
  overflow: hidden;
34
+ cursor: pointer;
34
35
  }
@@ -7,6 +7,7 @@ export default function GraphViewPanel(props) {
7
7
  var canvasTheme = displayConfig.canvasTheme || 'white';
8
8
 
9
9
  var _useCanvasTheme = useCanvasTheme({
10
+ topo: topo,
10
11
  canvasTheme: canvasTheme
11
12
  }),
12
13
  canvasColor = _useCanvasTheme.canvasColor;
@@ -1,77 +1,20 @@
1
1
  import _Tag from "@alifd/next/es/tag";
2
- import _extends from "@babel/runtime/helpers/extends";
3
2
  import React, { useState } from 'react';
4
3
  import styles from "./CanvasPanel.module.scss";
5
- var CANVAS_TOGGLE = [{
6
- value: 'white',
7
- label: '白色',
8
- color: '#FFFFFF',
9
- globalNodeLabelColor: '#4d6277',
10
- globalEdgeTagColor: '#4d6277'
11
- }, {
12
- value: 'lightblue',
13
- label: '蓝色',
14
- color: '#F9FBFF',
15
- globalNodeLabelColor: '#4d6277',
16
- globalEdgeTagColor: '#4d6277'
17
- }, // {
18
- // value: 'yellow',
19
- // label: '黄色',
20
- // color: '#FFFDE6',
21
- // },
22
- // {
23
- // value: 'green',
24
- // label: '绿色',
25
- // color: '#EAFFE8',
26
- // },
27
- {
28
- value: 'dark',
29
- label: '深色',
30
- color: '#031425',
31
- globalNodeLabelColor: '#ffffff',
32
- globalEdgeTagColor: '#ffffff'
33
- }];
4
+ import useCanvasThemeConfig from "./useCanvasThemeConfig";
34
5
  export default function CanvasPanel(props) {
35
6
  var topo = props.topo;
36
7
 
37
- var _topo$store$useModel = topo.store.useModel('displayConfig'),
38
- canvasTheme = _topo$store$useModel[0].canvasTheme,
39
- displayConfigDispatchers = _topo$store$useModel[1];
40
-
41
- var value = canvasTheme || 'white';
42
-
43
- var setCanvasTheme = function setCanvasTheme(themeItem) {
44
- var theme = themeItem.value;
45
- topo.historyManager.beginTransaction();
46
- displayConfigDispatchers.update({
47
- canvasTheme: theme
48
- }); // 设置资源/链路标注样式
49
-
50
- var _topo$store$getModelS = topo.store.getModelState('displayConfig'),
51
- nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle,
52
- defaultEdgeLabelStyle = _topo$store$getModelS.defaultEdgeLabelStyle;
53
-
54
- var globalNodeLabelStyle = _extends({}, nodeLabelStyle, {
55
- color: themeItem.globalNodeLabelColor
56
- });
57
-
58
- topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
59
-
60
- var globalEdgeTagStyle = _extends({}, defaultEdgeLabelStyle, {
61
- color: themeItem.globalEdgeTagColor
62
- });
63
-
64
- topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
65
- displayConfigDispatchers.update({
66
- nodeLabelStyle: globalNodeLabelStyle,
67
- defaultEdgeLabelStyle: globalEdgeTagStyle
68
- });
69
- topo.historyManager.endTransaction();
70
- };
8
+ var _useCanvasThemeConfig = useCanvasThemeConfig({
9
+ topo: topo
10
+ }),
11
+ themes = _useCanvasThemeConfig.themes,
12
+ canvasThemeName = _useCanvasThemeConfig.canvasThemeName,
13
+ setCanvasTheme = _useCanvasThemeConfig.setCanvasTheme;
71
14
 
72
15
  return /*#__PURE__*/React.createElement("div", {
73
16
  className: styles.canvasToggle
74
- }, CANVAS_TOGGLE.map(function (item, index) {
17
+ }, themes.map(function (item, index) {
75
18
  return /*#__PURE__*/React.createElement("div", {
76
19
  className: styles.canvas,
77
20
  key: index
@@ -80,9 +23,9 @@ export default function CanvasPanel(props) {
80
23
  style: {
81
24
  background: item.color
82
25
  },
83
- checked: value === item.value,
26
+ checked: item.name === canvasThemeName,
84
27
  onChange: function onChange(checked) {
85
- setCanvasTheme(item);
28
+ setCanvasTheme(item.name);
86
29
  }
87
30
  }, /*#__PURE__*/React.createElement("div", {
88
31
  className: styles.box
@@ -0,0 +1,42 @@
1
+ var THEMES = [{
2
+ name: 'white',
3
+ label: '白色',
4
+ color: '#FFFFFF',
5
+ toolsTheme: 'lightgrayblue',
6
+ globalNodeLabelColor: '#4d6277',
7
+ globalEdgeTagColor: '#4d6277',
8
+ text: {
9
+ color: '#4d6277'
10
+ }
11
+ }, {
12
+ name: 'lightblue',
13
+ label: '蓝色',
14
+ color: '#F9FBFF',
15
+ toolsTheme: 'white',
16
+ globalNodeLabelColor: '#4d6277',
17
+ globalEdgeTagColor: '#4d6277',
18
+ text: {
19
+ color: '#4d6277'
20
+ }
21
+ }, // {
22
+ // name: 'yellow',
23
+ // label: '黄色',
24
+ // color: '#FFFDE6',
25
+ // },
26
+ // {
27
+ // name: 'green',
28
+ // label: '绿色',
29
+ // color: '#EAFFE8',
30
+ // },
31
+ {
32
+ name: 'dark',
33
+ label: '深色',
34
+ color: '#031425',
35
+ toolsTheme: 'black',
36
+ globalNodeLabelColor: '#ffffff',
37
+ globalEdgeTagColor: '#ffffff',
38
+ text: {
39
+ color: '#ffffff'
40
+ }
41
+ }];
42
+ export default THEMES;
@@ -0,0 +1,116 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
3
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
4
+ import { getElements, isEdge, isGroup, isLayer, isNode, isText } from "../../../../../../utils/htElementUtils";
5
+ import THEMES from "./themes";
6
+
7
+ function useCanvasThemeConfig(props) {
8
+ var topo = props.topo;
9
+
10
+ var _topo$store$useModel = topo.store.useModel('displayConfig'),
11
+ displayConfig = _topo$store$useModel[0],
12
+ displayConfigDispatchers = _topo$store$useModel[1];
13
+
14
+ var canvasThemeName = displayConfig.canvasTheme || 'white';
15
+
16
+ var setCanvasTheme = /*#__PURE__*/function () {
17
+ var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeName) {
18
+ var themeConfig;
19
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
20
+ while (1) {
21
+ switch (_context.prev = _context.next) {
22
+ case 0:
23
+ themeConfig = THEMES.find(function (item) {
24
+ return item.name === themeName;
25
+ });
26
+ topo.historyManager.beginTransaction();
27
+ _context.next = 4;
28
+ return displayConfigDispatchers.update({
29
+ canvasTheme: themeName
30
+ });
31
+
32
+ case 4:
33
+ _context.next = 6;
34
+ return setGlobalTagTheme(themeConfig);
35
+
36
+ case 6:
37
+ setElementsTheme(themeConfig);
38
+ topo.historyManager.endTransaction();
39
+
40
+ case 8:
41
+ case "end":
42
+ return _context.stop();
43
+ }
44
+ }
45
+ }, _callee);
46
+ }));
47
+
48
+ return function setCanvasTheme(_x) {
49
+ return _ref.apply(this, arguments);
50
+ };
51
+ }();
52
+
53
+ function setGlobalTagTheme(_x2) {
54
+ return _setGlobalTagTheme.apply(this, arguments);
55
+ }
56
+
57
+ function _setGlobalTagTheme() {
58
+ _setGlobalTagTheme = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(themeConfig) {
59
+ var _topo$store$getModelS, nodeLabelStyle, defaultEdgeLabelStyle, globalNodeLabelStyle, globalEdgeTagStyle;
60
+
61
+ return _regeneratorRuntime.wrap(function _callee2$(_context2) {
62
+ while (1) {
63
+ switch (_context2.prev = _context2.next) {
64
+ case 0:
65
+ // 设置资源/链路标注样式
66
+ _topo$store$getModelS = topo.store.getModelState('displayConfig'), nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle, defaultEdgeLabelStyle = _topo$store$getModelS.defaultEdgeLabelStyle;
67
+ globalNodeLabelStyle = _extends({}, nodeLabelStyle, {
68
+ color: themeConfig.globalNodeLabelColor
69
+ });
70
+ topo.getHtTopo().setGlobalNodeLabelStyle(globalNodeLabelStyle);
71
+ globalEdgeTagStyle = _extends({}, defaultEdgeLabelStyle, {
72
+ color: themeConfig.globalEdgeTagColor
73
+ });
74
+ topo.getHtTopo().setGlobalEdgeTagStyle(globalEdgeTagStyle);
75
+ _context2.next = 7;
76
+ return displayConfigDispatchers.update({
77
+ nodeLabelStyle: globalNodeLabelStyle,
78
+ defaultEdgeLabelStyle: globalEdgeTagStyle
79
+ });
80
+
81
+ case 7:
82
+ case "end":
83
+ return _context2.stop();
84
+ }
85
+ }
86
+ }, _callee2);
87
+ }));
88
+ return _setGlobalTagTheme.apply(this, arguments);
89
+ }
90
+
91
+ function setElementsTheme(themeConfig) {
92
+ var dm = topo.getHtTopo().getGraphView().dm();
93
+ var elements = getElements(dm);
94
+ elements.forEach(function (element) {
95
+ if (isText(element)) {
96
+ element.s('text.color', themeConfig.text.color);
97
+ } else if (isGroup(element)) {
98
+ return 'groupTitle';
99
+ } else if (isNode(element)) {
100
+ return 'nodeTag';
101
+ } else if (isEdge(element)) {
102
+ return 'edgeTag';
103
+ } else if (isLayer(element)) {
104
+ return 'layerTitle';
105
+ }
106
+ });
107
+ }
108
+
109
+ return {
110
+ themes: THEMES,
111
+ canvasThemeName: canvasThemeName,
112
+ setCanvasTheme: setCanvasTheme
113
+ };
114
+ }
115
+
116
+ export default useCanvasThemeConfig;
@@ -12,13 +12,22 @@ function Content(props) {
12
12
  onPickerBlur = props.onPickerBlur,
13
13
  lineSizeChange = props.lineSizeChange,
14
14
  lineWidth = props.lineWidth;
15
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "\u7EBF"), /*#__PURE__*/React.createElement("div", {
15
+ return /*#__PURE__*/React.createElement("div", {
16
16
  style: {
17
- width: 200,
17
+ marginTop: '6px',
18
+ marginLeft: '12px'
19
+ }
20
+ }, /*#__PURE__*/React.createElement("div", null, "\u7EBF"), /*#__PURE__*/React.createElement("div", {
21
+ style: {
22
+ width: 183,
18
23
  display: 'flex',
19
24
  marginTop: '8px'
20
25
  }
21
26
  }, /*#__PURE__*/React.createElement("img", {
27
+ style: {
28
+ width: 14,
29
+ height: 14
30
+ },
22
31
  src: "/img/topo/editor/toolbar/\u7EBF\u6761\u586B\u5145/\u8FB9\u6846.svg",
23
32
  title: "\u7EBF\u6761\u5BBD\u5EA6"
24
33
  }), /*#__PURE__*/React.createElement(FontColorRange, {
@@ -30,7 +39,7 @@ function Content(props) {
30
39
  })), /*#__PURE__*/React.createElement("div", {
31
40
  style: {
32
41
  marginTop: '5px',
33
- marginLeft: '-2px'
42
+ marginLeft: '-5px'
34
43
  }
35
44
  }, /*#__PURE__*/React.createElement(ColorPanel, {
36
45
  onChange: onChange,
@@ -21,7 +21,7 @@ function EdgeColorButton(props) {
21
21
  disabled = _useState[0],
22
22
  setDisabled = _useState[1];
23
23
 
24
- var _useState2 = useState(),
24
+ var _useState2 = useState(1),
25
25
  lineWidth = _useState2[0],
26
26
  setLineWidth = _useState2[1]; // 拓扑图是否加载
27
27
 
@@ -54,7 +54,7 @@ function EdgeColorButton(props) {
54
54
  if (graphLoaded) {
55
55
  var edges = getEdgesBySelection(topo);
56
56
  var list = getLines(edges);
57
- setLineWidth(0); // eslint-disable-next-line eqeqeq
57
+ setLineWidth(1); // eslint-disable-next-line eqeqeq
58
58
 
59
59
  if (selection.length == 1 && selection[0].a('type') == 'line') {
60
60
  setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
@@ -26,12 +26,8 @@ function NodeAlignWidget(props) {
26
26
  setRightInputVal = _useState3[1];
27
27
 
28
28
  var _useState4 = useState(true),
29
- leftDisable = _useState4[0],
30
- setLeftDisable = _useState4[1];
31
-
32
- var _useState5 = useState(true),
33
- rightDisable = _useState5[0],
34
- setRightDisable = _useState5[1]; // 拓扑图是否加载
29
+ distributionDisabled = _useState4[0],
30
+ setDistributionDisabled = _useState4[1]; // 拓扑图是否加载
35
31
 
36
32
 
37
33
  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
@@ -41,7 +37,8 @@ function NodeAlignWidget(props) {
41
37
  var selection = topo.selectionManager.useSelection();
42
38
 
43
39
  var setSpace = function setSpace(type, num) {
44
- topo.historyManager.beginTransaction();
40
+ topo.historyManager.beginTransaction(); // eslint-disable-next-line no-shadow
41
+
45
42
  var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
46
43
  var nodes = selection.filter(function (ele) {
47
44
  return !isLayer(ele) && !isEdge(ele);
@@ -66,31 +63,14 @@ function NodeAlignWidget(props) {
66
63
  var nodes = selectionEle.filter(function (ele) {
67
64
  return !isLayer(ele) && !isEdge(ele);
68
65
  });
69
- setDisabled(nodes.length <= 1);
70
- getClickType('none');
71
- setLeftInputVal();
72
- setRightInputVal();
73
- }
74
- }, [graphLoaded, selection]);
66
+ setDisabled(nodes.length <= 1); // eslint-disable-next-line no-use-before-define
75
67
 
76
- var getClickType = function getClickType(type) {
77
- if (leftInputVal || rightInputVal) {
78
68
  setLeftInputVal();
79
69
  setRightInputVal();
80
- }
81
-
82
- setLeftDisable(true);
83
- setRightDisable(true);
84
-
85
- if (type === 'top' || type === 'middle' || type === 'bottom') {
86
- setLeftDisable(false);
87
- }
88
-
89
- if (type === 'left' || type === 'center' || type === 'right') {
90
- setRightDisable(false);
91
- }
92
- };
70
+ setDistributionDisabled(nodes.length <= 2);
71
+ } // eslint-disable-next-line react-hooks/exhaustive-deps
93
72
 
73
+ }, [graphLoaded, selection]);
94
74
  var icon = disabled ? /*#__PURE__*/React.createElement("img", {
95
75
  src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
96
76
  alt: ""
@@ -108,9 +88,9 @@ function NodeAlignWidget(props) {
108
88
  trigger: icon
109
89
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AlignSetting, {
110
90
  topo: topo,
111
- getClickType: getClickType
91
+ distributionDisabled: distributionDisabled
112
92
  }), /*#__PURE__*/React.createElement(_NumberPicker, {
113
- disabled: leftDisable,
93
+ disabled: disabled,
114
94
  size: "small",
115
95
  hasTrigger: false,
116
96
  placeholder: "\u591A\u4E2A\u503C",
@@ -120,7 +100,7 @@ function NodeAlignWidget(props) {
120
100
  max: 10000,
121
101
  onChange: leftInputChange
122
102
  }), /*#__PURE__*/React.createElement(_NumberPicker, {
123
- disabled: rightDisable,
103
+ disabled: disabled,
124
104
  size: "small",
125
105
  hasTrigger: false,
126
106
  placeholder: "\u591A\u4E2A\u503C",
@@ -1,15 +1,17 @@
1
1
  .leftInput{
2
2
  width: 100px !important;
3
- margin-right: 10px;
4
- margin-left: 5px;
3
+ margin: 0px 10px 18px 9px;
5
4
  :global{
6
5
  input{
7
6
  background: url('/img/topo/editor/toolbar/对齐/水平间距_normal.svg')no-repeat 5px center !important;
8
- background-position: right center !important;
7
+ background-position: 81px center !important;
9
8
  }
10
9
  .next-disabled input{
11
10
  background: url('/img/topo/editor/toolbar/对齐/水平间距_disable.svg')no-repeat 5px center !important;
12
- background-position: right center !important;
11
+ background-position: 81px center !important;
12
+ }
13
+ .next-input.next-small input{
14
+ height: calc(30px - 1px * 2);
13
15
  }
14
16
  }
15
17
  }
@@ -18,11 +20,14 @@
18
20
  :global{
19
21
  input{
20
22
  background: url('/img/topo/editor/toolbar/对齐/垂直间距 _normal.svg')no-repeat 5px center !important;
21
- background-position: right center !important;
23
+ background-position: 82px center !important;
22
24
  }
23
25
  .next-disabled input{
24
26
  background: url('/img/topo/editor/toolbar/对齐/垂直间距_disable.svg')no-repeat 5px center !important;
25
- background-position: right center !important;
27
+ background-position: 82px center !important;
28
+ }
29
+ .next-input.next-small input{
30
+ height: calc(30px - 1px * 2);
26
31
  }
27
32
  }
28
33
  }
@@ -1,12 +1,13 @@
1
1
  @import "@alifd/next/variables";
2
2
 
3
3
  .AlignSetting {
4
+ margin: 11px 7px 17px 7px;
4
5
  :global {
5
6
  .#{$css-prefix}divider-ver {
6
7
  background: #EBECF0;
7
8
  margin-right: 3px;
8
9
  height: 16px;
9
-
10
+ width:1px;
10
11
  }
11
12
  }
12
13
 
@@ -16,7 +17,7 @@
16
17
  border-radius: 4px;
17
18
  border: none !important;
18
19
  color: #4D6277;
19
- padding-left: 6px;
20
+ padding-left: 2px;
20
21
  margin-right: 3px;
21
22
 
22
23
  &:active {
@@ -1,48 +1,49 @@
1
1
  import _Button from "@alifd/next/es/button";
2
2
  import _Icon from "@alifd/next/es/icon";
3
3
  import _Divider from "@alifd/next/es/divider";
4
- import React, { useState } from "react";
4
+ import React, { useState } from 'react';
5
5
  import styles from "./AlignSetting.module.scss";
6
6
  var TREE_LAYOUT_OPTIONS = [{
7
- value: "left",
8
- label: "左对齐",
9
- icon: "tuopu_zuoceduiqi"
7
+ value: 'left',
8
+ label: '左对齐',
9
+ icon: 'tuopu_zuoceduiqi'
10
10
  }, {
11
- value: "center",
12
- label: "水平居中",
13
- icon: "tuopu_shuipingjuzhongduiqi"
11
+ value: 'center',
12
+ label: '水平居中',
13
+ icon: 'tuopu_shuipingjuzhongduiqi'
14
14
  }, {
15
- value: "right",
16
- label: "右对齐",
17
- icon: "tuopu_youceduiqi"
15
+ value: 'right',
16
+ label: '右对齐',
17
+ icon: 'tuopu_youceduiqi'
18
18
  }, {
19
- value: "top",
20
- label: "靠上对齐",
21
- icon: "tuopu_dingbuduiqi"
19
+ value: 'top',
20
+ label: '靠上对齐',
21
+ icon: 'tuopu_dingbuduiqi'
22
22
  }, {
23
- value: "middle",
24
- label: "垂直居中",
25
- icon: "tuopu_chuizhijuzhongduiqi"
23
+ value: 'middle',
24
+ label: '垂直居中',
25
+ icon: 'tuopu_chuizhijuzhongduiqi'
26
26
  }, {
27
- value: "bottom",
28
- label: "靠下对齐",
29
- icon: "tuopu_dibuduiqi"
27
+ value: 'bottom',
28
+ label: '靠下对齐',
29
+ icon: 'tuopu_dibuduiqi'
30
30
  }, {
31
- value: "divide"
31
+ value: 'divide'
32
32
  }, {
33
- value: "distributeHorizontal",
34
- label: "横向分布",
35
- icon: "tuopu_shuipingdengjianjuduiqi"
33
+ value: 'distributeHorizontal',
34
+ label: '横向分布',
35
+ icon: 'tuopu_shuipingdengjianjuduiqi'
36
36
  }, {
37
- value: "distributeVertical",
38
- label: "纵向分布",
39
- icon: "tuopu_chuizhidengjianjuduiqi"
37
+ value: 'distributeVertical',
38
+ label: '纵向分布',
39
+ icon: 'tuopu_chuizhidengjianjuduiqi'
40
40
  }];
41
41
 
42
42
  var AlignTypeList = function AlignTypeList(props) {
43
43
  var _props$selected = props.selected,
44
- selected = _props$selected === void 0 ? "left" : _props$selected,
45
- onChange = props.onChange;
44
+ selected = _props$selected === void 0 ? 'left' : _props$selected,
45
+ onChange = props.onChange,
46
+ distributionDisabled = props.distributionDisabled;
46
47
 
47
48
  var _useState = useState(selected),
48
49
  value = _useState[0],
@@ -57,16 +58,19 @@ var AlignTypeList = function AlignTypeList(props) {
57
58
  return /*#__PURE__*/React.createElement("div", {
58
59
  className: styles.AlignSetting
59
60
  }, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
60
- return item.value === "divide" ? /*#__PURE__*/React.createElement(_Divider, {
61
+ return item.value === 'divide' ? /*#__PURE__*/React.createElement(_Divider, {
61
62
  key: index,
62
63
  direction: "ver"
63
64
  }) : /*#__PURE__*/React.createElement(_Button, {
64
65
  key: index,
65
66
  className: "" + styles.redioBtn,
67
+ text: true,
66
68
  onClick: function onClick() {
67
69
  handleChange(item);
68
70
  },
69
- title: item.label
71
+ title: item.label // eslint-disable-next-line no-unneeded-ternary
72
+ ,
73
+ disabled: (item.value === 'distributeHorizontal' || item.value === 'distributeVertical') && distributionDisabled
70
74
  }, /*#__PURE__*/React.createElement(_Icon, {
71
75
  type: item.icon
72
76
  }));
@@ -3,10 +3,9 @@ import { isEdge, isLayer } from "../../../../../../utils/htElementUtils";
3
3
  import AlignTypeList from "./AlignTypeList";
4
4
  export default function AlignSetting(props) {
5
5
  var topo = props.topo,
6
- getClickType = props.getClickType;
6
+ distributionDisabled = props.distributionDisabled;
7
7
 
8
8
  var alignOnChange = function alignOnChange(type) {
9
- getClickType(type);
10
9
  topo.historyManager.beginTransaction();
11
10
  var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
12
11
  var nodes = selection.filter(function (ele) {
@@ -19,6 +18,7 @@ export default function AlignSetting(props) {
19
18
 
20
19
  return /*#__PURE__*/React.createElement(AlignTypeList, {
21
20
  onChange: alignOnChange,
22
- selected: "left"
21
+ selected: "left",
22
+ distributionDisabled: distributionDisabled
23
23
  });
24
24
  }