@riil-frontend/component-topology 6.0.0-alpha.34 → 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/1.js +2 -2
- package/build/2.js +1 -1
- package/build/index.css +1 -1
- package/build/index.js +19 -19
- 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/components/collapse/Collapse.module.scss +5 -4
- 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/Sidebar/views/ImagePanel/HtCustomImagePanel.js +12 -1
- package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js +12 -2
- package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss +1 -1
- 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/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js +50 -0
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/edgeTag.js +7 -2
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/text.js +20 -5
- 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/components/collapse/Collapse.module.scss +5 -4
- 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/Sidebar/views/ImagePanel/HtCustomImagePanel.js +13 -1
- package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js +13 -2
- package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss +1 -1
- 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/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js +61 -0
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/edgeTag.js +7 -2
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/text.js +20 -5
- 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 +3 -2
@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
10
10
|
var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
|
11
11
|
|
12
|
+
var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
|
13
|
+
|
12
14
|
var _HtImagePaletteModule = _interopRequireDefault(require("./HtImagePalette.module.scss"));
|
13
15
|
|
14
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
@@ -36,13 +38,22 @@ function HtImagePalette(props) {
|
|
36
38
|
viewRef.current = htTopo.createImagePalette(container, {
|
37
39
|
icons: icons
|
38
40
|
});
|
39
|
-
console.error(viewRef.current);
|
40
41
|
} catch (error) {
|
41
42
|
_rlog["default"].error('初始化资源面板失败', error);
|
42
|
-
}
|
43
|
+
}
|
44
|
+
|
45
|
+
var hanleResize = function hanleResize() {
|
46
|
+
if (viewRef.current) {
|
47
|
+
topo.getHtTopo().invalideComponents();
|
48
|
+
}
|
49
|
+
};
|
43
50
|
|
51
|
+
var resizeObserver = new _resizeObserverPolyfill["default"](hanleResize);
|
52
|
+
resizeObserver.observe(container); // 注销组件
|
44
53
|
|
45
54
|
return function () {
|
55
|
+
resizeObserver.disconnect();
|
56
|
+
|
46
57
|
if (viewRef.current) {
|
47
58
|
viewRef.current.destroy();
|
48
59
|
viewRef.current = null;
|
@@ -21,13 +21,22 @@ function Content(props) {
|
|
21
21
|
onPickerBlur = props.onPickerBlur,
|
22
22
|
lineSizeChange = props.lineSizeChange,
|
23
23
|
lineWidth = props.lineWidth;
|
24
|
-
return /*#__PURE__*/_react["default"].createElement("div",
|
24
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
25
25
|
style: {
|
26
|
-
|
26
|
+
marginTop: '6px',
|
27
|
+
marginLeft: '12px'
|
28
|
+
}
|
29
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, "\u7EBF"), /*#__PURE__*/_react["default"].createElement("div", {
|
30
|
+
style: {
|
31
|
+
width: 183,
|
27
32
|
display: 'flex',
|
28
33
|
marginTop: '8px'
|
29
34
|
}
|
30
35
|
}, /*#__PURE__*/_react["default"].createElement("img", {
|
36
|
+
style: {
|
37
|
+
width: 14,
|
38
|
+
height: 14
|
39
|
+
},
|
31
40
|
src: "/img/topo/editor/toolbar/\u7EBF\u6761\u586B\u5145/\u8FB9\u6846.svg",
|
32
41
|
title: "\u7EBF\u6761\u5BBD\u5EA6"
|
33
42
|
}), /*#__PURE__*/_react["default"].createElement(_FontColorRange["default"], {
|
@@ -39,7 +48,7 @@ function Content(props) {
|
|
39
48
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
40
49
|
style: {
|
41
50
|
marginTop: '5px',
|
42
|
-
marginLeft: '-
|
51
|
+
marginLeft: '-5px'
|
43
52
|
}
|
44
53
|
}, /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
|
45
54
|
onChange: onChange,
|
@@ -39,7 +39,7 @@ function EdgeColorButton(props) {
|
|
39
39
|
disabled = _useState[0],
|
40
40
|
setDisabled = _useState[1];
|
41
41
|
|
42
|
-
var _useState2 = (0, _react.useState)(),
|
42
|
+
var _useState2 = (0, _react.useState)(1),
|
43
43
|
lineWidth = _useState2[0],
|
44
44
|
setLineWidth = _useState2[1]; // 拓扑图是否加载
|
45
45
|
|
@@ -72,7 +72,7 @@ function EdgeColorButton(props) {
|
|
72
72
|
if (graphLoaded) {
|
73
73
|
var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
|
74
74
|
var list = getLines(edges);
|
75
|
-
setLineWidth(
|
75
|
+
setLineWidth(1); // eslint-disable-next-line eqeqeq
|
76
76
|
|
77
77
|
if (selection.length == 1 && selection[0].a('type') == 'line') {
|
78
78
|
setLineWidth(list[0] && (list[0].a('styles') && list[0].a('styles').width || list[0].getStyleMap()['edge.width']) || 2);
|
@@ -45,12 +45,8 @@ function NodeAlignWidget(props) {
|
|
45
45
|
setRightInputVal = _useState3[1];
|
46
46
|
|
47
47
|
var _useState4 = (0, _react.useState)(true),
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
var _useState5 = (0, _react.useState)(true),
|
52
|
-
rightDisable = _useState5[0],
|
53
|
-
setRightDisable = _useState5[1]; // 拓扑图是否加载
|
48
|
+
distributionDisabled = _useState4[0],
|
49
|
+
setDistributionDisabled = _useState4[1]; // 拓扑图是否加载
|
54
50
|
|
55
51
|
|
56
52
|
var _topo$store$useModelS = topo.store.useModelState('topoMod'),
|
@@ -60,7 +56,8 @@ function NodeAlignWidget(props) {
|
|
60
56
|
var selection = topo.selectionManager.useSelection();
|
61
57
|
|
62
58
|
var setSpace = function setSpace(type, num) {
|
63
|
-
topo.historyManager.beginTransaction();
|
59
|
+
topo.historyManager.beginTransaction(); // eslint-disable-next-line no-shadow
|
60
|
+
|
64
61
|
var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
|
65
62
|
var nodes = selection.filter(function (ele) {
|
66
63
|
return !(0, _htElementUtils.isLayer)(ele) && !(0, _htElementUtils.isEdge)(ele);
|
@@ -85,31 +82,14 @@ function NodeAlignWidget(props) {
|
|
85
82
|
var nodes = selectionEle.filter(function (ele) {
|
86
83
|
return !(0, _htElementUtils.isLayer)(ele) && !(0, _htElementUtils.isEdge)(ele);
|
87
84
|
});
|
88
|
-
setDisabled(nodes.length <= 1);
|
89
|
-
getClickType('none');
|
90
|
-
setLeftInputVal();
|
91
|
-
setRightInputVal();
|
92
|
-
}
|
93
|
-
}, [graphLoaded, selection]);
|
85
|
+
setDisabled(nodes.length <= 1); // eslint-disable-next-line no-use-before-define
|
94
86
|
|
95
|
-
var getClickType = function getClickType(type) {
|
96
|
-
if (leftInputVal || rightInputVal) {
|
97
87
|
setLeftInputVal();
|
98
88
|
setRightInputVal();
|
99
|
-
|
100
|
-
|
101
|
-
setLeftDisable(true);
|
102
|
-
setRightDisable(true);
|
103
|
-
|
104
|
-
if (type === 'top' || type === 'middle' || type === 'bottom') {
|
105
|
-
setLeftDisable(false);
|
106
|
-
}
|
107
|
-
|
108
|
-
if (type === 'left' || type === 'center' || type === 'right') {
|
109
|
-
setRightDisable(false);
|
110
|
-
}
|
111
|
-
};
|
89
|
+
setDistributionDisabled(nodes.length <= 2);
|
90
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
112
91
|
|
92
|
+
}, [graphLoaded, selection]);
|
113
93
|
var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
|
114
94
|
src: "/img/topo/editor/toolbar/\u5BF9\u9F50/Disable.svg",
|
115
95
|
alt: ""
|
@@ -127,9 +107,9 @@ function NodeAlignWidget(props) {
|
|
127
107
|
trigger: icon
|
128
108
|
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_AlignSetting["default"], {
|
129
109
|
topo: topo,
|
130
|
-
|
110
|
+
distributionDisabled: distributionDisabled
|
131
111
|
}), /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
|
132
|
-
disabled:
|
112
|
+
disabled: disabled,
|
133
113
|
size: "small",
|
134
114
|
hasTrigger: false,
|
135
115
|
placeholder: "\u591A\u4E2A\u503C",
|
@@ -139,7 +119,7 @@ function NodeAlignWidget(props) {
|
|
139
119
|
max: 10000,
|
140
120
|
onChange: leftInputChange
|
141
121
|
}), /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
|
142
|
-
disabled:
|
122
|
+
disabled: disabled,
|
143
123
|
size: "small",
|
144
124
|
hasTrigger: false,
|
145
125
|
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
|
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
exports.__esModule = true;
|
6
|
+
exports.formatBackgroundRgbaColor = formatBackgroundRgbaColor;
|
7
|
+
exports.formatHexColor = formatHexColor;
|
8
|
+
exports.parseColor = parseColor;
|
9
|
+
|
10
|
+
var _color = _interopRequireDefault(require("color"));
|
11
|
+
|
12
|
+
/**
|
13
|
+
* 解析颜色字符串为对象
|
14
|
+
*
|
15
|
+
* @param {string} colorStr
|
16
|
+
* @returns {null|{hex, rgb:{r,g,b,a}}}
|
17
|
+
*/
|
18
|
+
function parseColor(colorStr) {
|
19
|
+
if (!colorStr) {
|
20
|
+
return null;
|
21
|
+
}
|
22
|
+
|
23
|
+
var color = (0, _color["default"])(colorStr);
|
24
|
+
var rgb = color.rgb();
|
25
|
+
return {
|
26
|
+
hex: color.hex(),
|
27
|
+
rgb: {
|
28
|
+
r: rgb.color[0],
|
29
|
+
g: rgb.color[1],
|
30
|
+
b: rgb.color[2],
|
31
|
+
a: rgb.valpha
|
32
|
+
}
|
33
|
+
};
|
34
|
+
}
|
35
|
+
|
36
|
+
function formatHexColor(color) {
|
37
|
+
return color ? color.hex : null;
|
38
|
+
}
|
39
|
+
/**
|
40
|
+
* 格式化背景rgba颜色
|
41
|
+
* @param {{background, opacity}} prevColor
|
42
|
+
* @param {{background, opacity}} currentColor
|
43
|
+
*/
|
44
|
+
|
45
|
+
|
46
|
+
function formatBackgroundRgbaColor(prevColor, currentColor) {
|
47
|
+
if (!('background' in currentColor) && !('opacity' in currentColor)) {
|
48
|
+
return null;
|
49
|
+
}
|
50
|
+
|
51
|
+
var colorObj = Object.assign(prevColor, currentColor);
|
52
|
+
var background = colorObj.background,
|
53
|
+
opacity = colorObj.opacity;
|
54
|
+
|
55
|
+
if (!background) {
|
56
|
+
return null;
|
57
|
+
}
|
58
|
+
|
59
|
+
var rgb = background.rgb;
|
60
|
+
return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + opacity + ")";
|
61
|
+
}
|
@@ -8,9 +8,14 @@ exports.setTextStyle = setTextStyle;
|
|
8
8
|
function getTextStyle(element) {
|
9
9
|
return {
|
10
10
|
color: null,
|
11
|
+
// 文字颜色
|
11
12
|
fontFamily: null,
|
12
|
-
fontSize: null,
|
13
|
-
|
13
|
+
fontSize: null // fontBold: false, // 文字样式加粗 @V1.2
|
14
|
+
// fontItalic: false, // 文字样式斜体 @V1.2
|
15
|
+
// fontUnderline: false, // 文字样式下划线 @V1.2
|
16
|
+
// background: {rgb: {}, hex: ''}, // 背景颜色,rgba格式。null表示无
|
17
|
+
// opacity: 1, // 背景透明度。值范围 0-1, null,null表示无
|
18
|
+
|
14
19
|
};
|
15
20
|
}
|
16
21
|
|
@@ -11,21 +11,36 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
11
11
|
|
12
12
|
var _fontStyleUtil = _interopRequireDefault(require("../../../../../../settings/common/text/fontStyleUtil"));
|
13
13
|
|
14
|
+
var _colorUtil = require("../colorUtil");
|
15
|
+
|
14
16
|
function getTextStyle(element) {
|
17
|
+
var _background$rgb;
|
18
|
+
|
15
19
|
var underline = element.s('text.decoration') === 'underline';
|
20
|
+
var background = (0, _colorUtil.parseColor)(element.s('textBackground'));
|
16
21
|
return (0, _extends2["default"])({
|
17
|
-
color:
|
22
|
+
color: (0, _colorUtil.parseColor)(element.s('text.color')),
|
18
23
|
underline: underline
|
19
|
-
}, _fontStyleUtil["default"].toMap(element.s('text.font'))
|
24
|
+
}, _fontStyleUtil["default"].toMap(element.s('text.font')), {
|
25
|
+
background: background,
|
26
|
+
// 背景颜色,格式: {rgba: {}, hex: ''} | null
|
27
|
+
opacity: background === null || background === void 0 ? void 0 : (_background$rgb = background.rgb) === null || _background$rgb === void 0 ? void 0 : _background$rgb.a // 背景透明度。值范围 0-1, null,null表示无
|
28
|
+
|
29
|
+
});
|
20
30
|
}
|
21
31
|
|
22
32
|
function setTextStyle(element, style) {
|
23
|
-
var underline = style.underline;
|
24
|
-
|
25
33
|
if ('underline' in style) {
|
26
|
-
element.s('text.decoration', underline ? 'underline' : null);
|
34
|
+
element.s('text.decoration', style.underline ? 'underline' : null);
|
27
35
|
}
|
28
36
|
|
37
|
+
if ('color' in style) {
|
38
|
+
element.s('text.color', style.color.hex);
|
39
|
+
} // 背景颜色
|
40
|
+
|
41
|
+
|
42
|
+
var prevStyle = getTextStyle(element);
|
43
|
+
element.s('textBackground', (0, _colorUtil.formatBackgroundRgbaColor)(prevStyle, style));
|
29
44
|
var fontStyle = (0, _extends2["default"])({}, getTextStyle(element), style);
|
30
45
|
|
31
46
|
var fontStr = _fontStyleUtil["default"].build(fontStyle);
|
@@ -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 {
|
@@ -20,45 +20,46 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
20
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
21
21
|
|
22
22
|
var TREE_LAYOUT_OPTIONS = [{
|
23
|
-
value:
|
24
|
-
label:
|
25
|
-
icon:
|
23
|
+
value: 'left',
|
24
|
+
label: '左对齐',
|
25
|
+
icon: 'tuopu_zuoceduiqi'
|
26
26
|
}, {
|
27
|
-
value:
|
28
|
-
label:
|
29
|
-
icon:
|
27
|
+
value: 'center',
|
28
|
+
label: '水平居中',
|
29
|
+
icon: 'tuopu_shuipingjuzhongduiqi'
|
30
30
|
}, {
|
31
|
-
value:
|
32
|
-
label:
|
33
|
-
icon:
|
31
|
+
value: 'right',
|
32
|
+
label: '右对齐',
|
33
|
+
icon: 'tuopu_youceduiqi'
|
34
34
|
}, {
|
35
|
-
value:
|
36
|
-
label:
|
37
|
-
icon:
|
35
|
+
value: 'top',
|
36
|
+
label: '靠上对齐',
|
37
|
+
icon: 'tuopu_dingbuduiqi'
|
38
38
|
}, {
|
39
|
-
value:
|
40
|
-
label:
|
41
|
-
icon:
|
39
|
+
value: 'middle',
|
40
|
+
label: '垂直居中',
|
41
|
+
icon: 'tuopu_chuizhijuzhongduiqi'
|
42
42
|
}, {
|
43
|
-
value:
|
44
|
-
label:
|
45
|
-
icon:
|
43
|
+
value: 'bottom',
|
44
|
+
label: '靠下对齐',
|
45
|
+
icon: 'tuopu_dibuduiqi'
|
46
46
|
}, {
|
47
|
-
value:
|
47
|
+
value: 'divide'
|
48
48
|
}, {
|
49
|
-
value:
|
50
|
-
label:
|
51
|
-
icon:
|
49
|
+
value: 'distributeHorizontal',
|
50
|
+
label: '横向分布',
|
51
|
+
icon: 'tuopu_shuipingdengjianjuduiqi'
|
52
52
|
}, {
|
53
|
-
value:
|
54
|
-
label:
|
55
|
-
icon:
|
53
|
+
value: 'distributeVertical',
|
54
|
+
label: '纵向分布',
|
55
|
+
icon: 'tuopu_chuizhidengjianjuduiqi'
|
56
56
|
}];
|
57
57
|
|
58
58
|
var AlignTypeList = function AlignTypeList(props) {
|
59
59
|
var _props$selected = props.selected,
|
60
|
-
selected = _props$selected === void 0 ?
|
61
|
-
onChange = props.onChange
|
60
|
+
selected = _props$selected === void 0 ? 'left' : _props$selected,
|
61
|
+
onChange = props.onChange,
|
62
|
+
distributionDisabled = props.distributionDisabled;
|
62
63
|
|
63
64
|
var _useState = (0, _react.useState)(selected),
|
64
65
|
value = _useState[0],
|
@@ -73,16 +74,19 @@ var AlignTypeList = function AlignTypeList(props) {
|
|
73
74
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
74
75
|
className: _AlignSettingModule["default"].AlignSetting
|
75
76
|
}, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
|
76
|
-
return item.value ===
|
77
|
+
return item.value === 'divide' ? /*#__PURE__*/_react["default"].createElement(_divider["default"], {
|
77
78
|
key: index,
|
78
79
|
direction: "ver"
|
79
80
|
}) : /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
80
81
|
key: index,
|
81
82
|
className: "" + _AlignSettingModule["default"].redioBtn,
|
83
|
+
text: true,
|
82
84
|
onClick: function onClick() {
|
83
85
|
handleChange(item);
|
84
86
|
},
|
85
|
-
title: item.label
|
87
|
+
title: item.label // eslint-disable-next-line no-unneeded-ternary
|
88
|
+
,
|
89
|
+
disabled: (item.value === 'distributeHorizontal' || item.value === 'distributeVertical') && distributionDisabled
|
86
90
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
87
91
|
type: item.icon
|
88
92
|
}));
|
@@ -13,10 +13,9 @@ var _AlignTypeList = _interopRequireDefault(require("./AlignTypeList"));
|
|
13
13
|
|
14
14
|
function AlignSetting(props) {
|
15
15
|
var topo = props.topo,
|
16
|
-
|
16
|
+
distributionDisabled = props.distributionDisabled;
|
17
17
|
|
18
18
|
var alignOnChange = function alignOnChange(type) {
|
19
|
-
getClickType(type);
|
20
19
|
topo.historyManager.beginTransaction();
|
21
20
|
var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
|
22
21
|
var nodes = selection.filter(function (ele) {
|
@@ -29,6 +28,7 @@ function AlignSetting(props) {
|
|
29
28
|
|
30
29
|
return /*#__PURE__*/_react["default"].createElement(_AlignTypeList["default"], {
|
31
30
|
onChange: alignOnChange,
|
32
|
-
selected: "left"
|
31
|
+
selected: "left",
|
32
|
+
distributionDisabled: distributionDisabled
|
33
33
|
});
|
34
34
|
}
|
@@ -14,35 +14,49 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
14
14
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
15
15
|
|
16
16
|
var themeMap = [{
|
17
|
-
|
17
|
+
name: 'white',
|
18
18
|
label: '白色',
|
19
|
-
color:
|
19
|
+
color: null,
|
20
|
+
toolsTheme: 'lightgrayblue'
|
20
21
|
}, {
|
21
|
-
|
22
|
+
name: 'lightblue',
|
22
23
|
label: '蓝色',
|
23
|
-
color: '#F9FBFF'
|
24
|
+
color: '#F9FBFF',
|
25
|
+
toolsTheme: 'white'
|
24
26
|
}, {
|
25
|
-
|
27
|
+
name: 'yellow',
|
26
28
|
label: '黄色',
|
27
29
|
color: '#FFFDE6'
|
28
30
|
}, {
|
29
|
-
|
31
|
+
name: 'green',
|
30
32
|
label: '绿色',
|
31
33
|
color: '#EAFFE8'
|
32
34
|
}, {
|
33
|
-
|
35
|
+
name: 'dark',
|
34
36
|
label: '深色',
|
35
|
-
color: '#031425'
|
37
|
+
color: '#031425',
|
38
|
+
toolsTheme: 'black'
|
36
39
|
}].reduce(function (map, item) {
|
37
40
|
var _extends2;
|
38
41
|
|
39
|
-
return (0, _extends3["default"])({}, map, (_extends2 = {}, _extends2[item.
|
42
|
+
return (0, _extends3["default"])({}, map, (_extends2 = {}, _extends2[item.name] = item, _extends2));
|
40
43
|
}, {});
|
41
44
|
|
42
45
|
function useCanvasTheme(props) {
|
43
|
-
var
|
44
|
-
|
45
|
-
|
46
|
+
var topo = props.topo,
|
47
|
+
canvasTheme = props.canvasTheme; // 拓扑图是否加载
|
48
|
+
|
49
|
+
var _topo$store$useModelS = topo.store.useModelState('topoMod'),
|
50
|
+
graphLoaded = _topo$store$useModelS.graphLoaded;
|
51
|
+
|
52
|
+
(0, _react.useEffect)(function () {
|
53
|
+
// 设置
|
54
|
+
var themeConfig = themeMap[canvasTheme];
|
55
|
+
|
56
|
+
if (graphLoaded && themeConfig) {
|
57
|
+
topo.getHtTopo().setToolsTheme(themeConfig.toolsTheme);
|
58
|
+
}
|
59
|
+
}, [canvasTheme, graphLoaded]);
|
46
60
|
return {
|
47
61
|
canvasColor: themeMap[canvasTheme].color
|
48
62
|
};
|
@@ -52,7 +52,7 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
|
|
52
52
|
var _SelectionManager = _interopRequireDefault(require("./SelectionManager"));
|
53
53
|
|
54
54
|
// eslint-disable-next-line no-undef
|
55
|
-
var version = typeof "6.0.0-alpha.
|
55
|
+
var version = typeof "6.0.0-alpha.37" === 'string' ? "6.0.0-alpha.37" : null;
|
56
56
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
57
57
|
/**
|
58
58
|
* 拓扑显示和编辑
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@riil-frontend/component-topology",
|
3
|
-
"version": "6.0.0-alpha.
|
3
|
+
"version": "6.0.0-alpha.37",
|
4
4
|
"description": "拓扑",
|
5
5
|
"scripts": {
|
6
6
|
"start": "build-scripts start",
|
@@ -41,6 +41,7 @@
|
|
41
41
|
"@ahooksjs/use-sortable-plugin": "^0.2.1",
|
42
42
|
"@ahooksjs/use-tree-plugin": "^0.2.1",
|
43
43
|
"@alifd/biz-anchor": "^1.1.7",
|
44
|
+
"color": "^4.2.3",
|
44
45
|
"@ice/store": "^1.4.2",
|
45
46
|
"@riil-frontend/component-topo-icon-select": "^1.0.17",
|
46
47
|
"@riil-frontend/component-topology-utils": "^2.1.0",
|
@@ -115,6 +116,6 @@
|
|
115
116
|
"access": "public"
|
116
117
|
},
|
117
118
|
"license": "MIT",
|
118
|
-
"homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.
|
119
|
+
"homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.37/build/index.html",
|
119
120
|
"gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
|
120
121
|
}
|