@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.
- package/build/index.css +1 -1
- package/build/index.js +1 -1
- package/es/components/ColorPanel/components/ColorBlock/index.module.scss +1 -0
- package/es/components/ColorPanel/components/FontColorRange/index.module.scss +3 -4
- package/es/components/ColorPanel/index.module.scss +4 -3
- package/es/core/components/TopoView/GraphViewPanel.js +1 -0
- package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +10 -67
- package/es/core/editor/components/Sidebar/views/CanvasPanel/themes.js +42 -0
- package/es/core/editor/components/Sidebar/views/CanvasPanel/useCanvasThemeConfig.js +116 -0
- package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/Content.js +12 -3
- package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
- package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.js +11 -31
- package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss +11 -6
- package/es/core/editor/components/settings/common/AlignSetting/AlignSetting.module.scss +3 -2
- package/es/core/editor/components/settings/common/AlignSetting/AlignTypeList.js +34 -30
- package/es/core/editor/components/settings/common/AlignSetting/index.js +3 -3
- package/es/core/hooks/useCanvasTheme.js +26 -12
- package/es/core/models/TopoApp.js +1 -1
- package/lib/components/ColorPanel/components/ColorBlock/index.module.scss +1 -0
- package/lib/components/ColorPanel/components/FontColorRange/index.module.scss +3 -4
- package/lib/components/ColorPanel/index.module.scss +4 -3
- package/lib/core/components/TopoView/GraphViewPanel.js +1 -0
- package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +11 -66
- package/lib/core/editor/components/Sidebar/views/CanvasPanel/themes.js +47 -0
- package/lib/core/editor/components/Sidebar/views/CanvasPanel/useCanvasThemeConfig.js +128 -0
- package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/Content.js +12 -3
- package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
- package/lib/core/editor/components/Toolbar/widgets/NodeAlignWidget.js +11 -31
- package/lib/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss +11 -6
- package/lib/core/editor/components/settings/common/AlignSetting/AlignSetting.module.scss +3 -2
- package/lib/core/editor/components/settings/common/AlignSetting/AlignTypeList.js +33 -29
- package/lib/core/editor/components/settings/common/AlignSetting/index.js +3 -3
- package/lib/core/hooks/useCanvasTheme.js +26 -12
- package/lib/core/models/TopoApp.js +1 -1
- package/package.json +2 -2
@@ -4,15 +4,14 @@
|
|
4
4
|
.content {
|
5
5
|
display: flex;
|
6
6
|
flex-direction: row;
|
7
|
-
|
8
|
-
margin-left:
|
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:
|
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:
|
4
|
+
width: 201px;
|
5
5
|
.ul{
|
6
6
|
width: 100%;
|
7
7
|
.li{
|
8
8
|
display: inline-block;
|
9
|
-
width:
|
10
|
-
line-height:
|
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
|
}
|
@@ -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
|
-
|
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
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
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
|
-
},
|
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:
|
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",
|
15
|
+
return /*#__PURE__*/React.createElement("div", {
|
16
16
|
style: {
|
17
|
-
|
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: '-
|
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(
|
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
|
-
|
30
|
-
|
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
|
-
|
91
|
+
distributionDisabled: distributionDisabled
|
112
92
|
}), /*#__PURE__*/React.createElement(_NumberPicker, {
|
113
|
-
disabled:
|
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:
|
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
|
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:
|
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:
|
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:
|
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:
|
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:
|
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
|
4
|
+
import React, { useState } from 'react';
|
5
5
|
import styles from "./AlignSetting.module.scss";
|
6
6
|
var TREE_LAYOUT_OPTIONS = [{
|
7
|
-
value:
|
8
|
-
label:
|
9
|
-
icon:
|
7
|
+
value: 'left',
|
8
|
+
label: '左对齐',
|
9
|
+
icon: 'tuopu_zuoceduiqi'
|
10
10
|
}, {
|
11
|
-
value:
|
12
|
-
label:
|
13
|
-
icon:
|
11
|
+
value: 'center',
|
12
|
+
label: '水平居中',
|
13
|
+
icon: 'tuopu_shuipingjuzhongduiqi'
|
14
14
|
}, {
|
15
|
-
value:
|
16
|
-
label:
|
17
|
-
icon:
|
15
|
+
value: 'right',
|
16
|
+
label: '右对齐',
|
17
|
+
icon: 'tuopu_youceduiqi'
|
18
18
|
}, {
|
19
|
-
value:
|
20
|
-
label:
|
21
|
-
icon:
|
19
|
+
value: 'top',
|
20
|
+
label: '靠上对齐',
|
21
|
+
icon: 'tuopu_dingbuduiqi'
|
22
22
|
}, {
|
23
|
-
value:
|
24
|
-
label:
|
25
|
-
icon:
|
23
|
+
value: 'middle',
|
24
|
+
label: '垂直居中',
|
25
|
+
icon: 'tuopu_chuizhijuzhongduiqi'
|
26
26
|
}, {
|
27
|
-
value:
|
28
|
-
label:
|
29
|
-
icon:
|
27
|
+
value: 'bottom',
|
28
|
+
label: '靠下对齐',
|
29
|
+
icon: 'tuopu_dibuduiqi'
|
30
30
|
}, {
|
31
|
-
value:
|
31
|
+
value: 'divide'
|
32
32
|
}, {
|
33
|
-
value:
|
34
|
-
label:
|
35
|
-
icon:
|
33
|
+
value: 'distributeHorizontal',
|
34
|
+
label: '横向分布',
|
35
|
+
icon: 'tuopu_shuipingdengjianjuduiqi'
|
36
36
|
}, {
|
37
|
-
value:
|
38
|
-
label:
|
39
|
-
icon:
|
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 ?
|
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 ===
|
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
|
-
|
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
|
}
|