@riil-frontend/component-topology 12.1.1 → 12.1.3
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 +29 -29
- package/es/components/ColorPanel/index.js +68 -58
- package/es/core/components/AlarmListPanel/components/AlarmListItem.js +10 -1
- package/es/core/editor/components/Toolbar/widgets/FontColorButton.js +10 -91
- package/es/core/editor/components/Toolbar/widgets/components/FontColorDropdown.js +120 -0
- package/es/core/editor/components/Toolbar/widgets/components/FontColorDropdown.module.scss +45 -0
- package/es/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js +21 -15
- package/es/core/hooks/useResourceConfig.js +1 -2
- package/es/core/hooks/useTopoEdit.js +2 -1
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/topoData.js +3 -4
- package/es/core/models/utils/linkUtils.js +29 -24
- package/es/core/store/models/topoMod.js +3 -6
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +4 -2
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +2 -1
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js +3 -2
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +4 -2
- package/es/networkTopo/services/topo/basic.js +27 -17
- package/es/networkTopo/utils/exitLinkUtil.js +2 -2
- package/es/networkTopo/utils/relateTopoDataUtil.js +144 -0
- package/es/utils/ResourceConfigUtil.js +1 -16
- package/es/utils/htElementUtils.js +3 -1
- package/lib/components/ColorPanel/index.js +71 -59
- package/lib/core/components/AlarmListPanel/components/AlarmListItem.js +10 -1
- package/lib/core/editor/components/Toolbar/widgets/FontColorButton.js +11 -95
- package/lib/core/editor/components/Toolbar/widgets/components/FontColorDropdown.js +136 -0
- package/lib/core/editor/components/Toolbar/widgets/components/FontColorDropdown.module.scss +45 -0
- package/lib/core/editor/components/Toolbar/widgets/components/FontStyleSelect.js +21 -15
- package/lib/core/hooks/useResourceConfig.js +1 -2
- package/lib/core/hooks/useTopoEdit.js +2 -1
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/topoData.js +3 -4
- package/lib/core/models/utils/linkUtils.js +29 -24
- package/lib/core/store/models/topoMod.js +3 -6
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/EventsCard.js +6 -2
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +2 -1
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js +3 -2
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +4 -2
- package/lib/networkTopo/services/topo/basic.js +32 -18
- package/lib/networkTopo/utils/exitLinkUtil.js +2 -2
- package/lib/networkTopo/utils/relateTopoDataUtil.js +158 -0
- package/lib/utils/ResourceConfigUtil.js +1 -16
- package/lib/utils/htElementUtils.js +3 -1
- package/package.json +2 -2
@@ -1,14 +1,68 @@
|
|
1
1
|
import _Balloon from "@alifd/next/es/balloon";
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
3
|
|
3
4
|
/* eslint-disable eqeqeq */
|
4
5
|
|
5
6
|
/* eslint-disable jsx-a11y/alt-text */
|
6
7
|
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
8
|
+
import PropTypes from 'prop-types';
|
7
9
|
import classnames from 'classnames';
|
8
10
|
import Color from 'color';
|
9
11
|
import { SketchPicker } from 'react-color';
|
10
12
|
import ColorBlock from "./components/ColorBlock";
|
11
13
|
import styles from "./index.module.scss";
|
14
|
+
var defaultColorList = [{
|
15
|
+
color: 'rgba(255, 255, 255, 1)',
|
16
|
+
borderColor: 'rgba(219, 219, 219, 1)'
|
17
|
+
}, {
|
18
|
+
color: 'rgba(245, 245, 245, 1)',
|
19
|
+
borderColor: 'rgba(208, 208, 208, 1)'
|
20
|
+
}, {
|
21
|
+
color: 'rgba(230, 230, 230, 1)',
|
22
|
+
borderColor: 'rgba(196, 196, 196, 1)'
|
23
|
+
}, {
|
24
|
+
color: 'rgba(168, 168, 168, 1)',
|
25
|
+
borderColor: 'rgba(146, 146, 146, 1)'
|
26
|
+
}, {
|
27
|
+
color: 'rgba(97, 97, 97, 1)',
|
28
|
+
borderColor: 'rgba(85, 85, 85, 1)'
|
29
|
+
}, {
|
30
|
+
color: 'rgba(49, 49, 49, 1)',
|
31
|
+
borderColor: 'rgba(43, 43, 43, 1)'
|
32
|
+
}, {
|
33
|
+
color: 'rgba(251, 115, 80, 1)',
|
34
|
+
borderColor: 'rgba(213, 98, 69, 1)'
|
35
|
+
}, {
|
36
|
+
color: 'rgba(255, 166, 41, 1)',
|
37
|
+
borderColor: 'rgba(219, 144, 45, 1)'
|
38
|
+
}, {
|
39
|
+
color: 'rgba(255, 205, 42, 1)',
|
40
|
+
borderColor: 'rgba(216, 175, 37, 1)'
|
41
|
+
}, {
|
42
|
+
color: 'rgba(18, 174, 92, 1)',
|
43
|
+
borderColor: 'rgba(23, 148, 79, 1)'
|
44
|
+
}, {
|
45
|
+
color: 'rgba(83, 184, 255, 1)',
|
46
|
+
borderColor: 'rgba(74, 156, 217, 1)'
|
47
|
+
}, {
|
48
|
+
color: 'rgba(183, 128, 255, 1)',
|
49
|
+
borderColor: 'rgba(155, 109, 216, 1)'
|
50
|
+
}, {
|
51
|
+
color: 'rgba(254, 192, 174, 1)',
|
52
|
+
borderColor: 'rgba(217, 163, 148, 1)'
|
53
|
+
}, {
|
54
|
+
color: 'rgba(252, 209, 156, 1)',
|
55
|
+
borderColor: 'rgba(215, 178, 133, 1)'
|
56
|
+
}, {
|
57
|
+
color: 'rgba(255, 232, 163, 1)',
|
58
|
+
borderColor: 'rgba(217, 198, 139, 1)'
|
59
|
+
}, {
|
60
|
+
color: 'rgba(176, 244, 197, 1)',
|
61
|
+
borderColor: 'rgba(153, 209, 171, 1)'
|
62
|
+
}, {
|
63
|
+
color: 'rgba(189, 227, 255, 1)',
|
64
|
+
borderColor: 'rgba(161, 193, 217, 1)'
|
65
|
+
}];
|
12
66
|
/**
|
13
67
|
* 颜色选择
|
14
68
|
*
|
@@ -22,7 +76,9 @@ function ColorPanel(props) {
|
|
22
76
|
|
23
77
|
var value = props.value,
|
24
78
|
showClear = props.showClear,
|
25
|
-
dataSource = props.dataSource,
|
79
|
+
_props$dataSource = props.dataSource,
|
80
|
+
dataSource = _props$dataSource === void 0 ? defaultColorList : _props$dataSource,
|
81
|
+
colorPickerBalloonProps = props.colorPickerBalloonProps,
|
26
82
|
onChange = props.onChange,
|
27
83
|
onPickerFocus = props.onPickerFocus,
|
28
84
|
onPickerBlur = props.onPickerBlur;
|
@@ -169,9 +225,7 @@ function ColorPanel(props) {
|
|
169
225
|
onClick: function onClick() {
|
170
226
|
changClick('17');
|
171
227
|
}
|
172
|
-
}, /*#__PURE__*/React.createElement(_Balloon, {
|
173
|
-
visible: visible,
|
174
|
-
trigger: defaultTrigger,
|
228
|
+
}, /*#__PURE__*/React.createElement(_Balloon, _extends({
|
175
229
|
closable: false,
|
176
230
|
triggerType: "click",
|
177
231
|
animation: false,
|
@@ -180,9 +234,12 @@ function ColorPanel(props) {
|
|
180
234
|
alignEdge: true,
|
181
235
|
style: {
|
182
236
|
paddingBottom: 0
|
183
|
-
}
|
237
|
+
}
|
238
|
+
}, colorPickerBalloonProps, {
|
239
|
+
visible: visible,
|
240
|
+
trigger: defaultTrigger,
|
184
241
|
onClose: close
|
185
|
-
}, /*#__PURE__*/React.createElement(SketchPicker, {
|
242
|
+
}), /*#__PURE__*/React.createElement(SketchPicker, {
|
186
243
|
color: data !== null && data !== void 0 ? data : undefined // width={230}
|
187
244
|
,
|
188
245
|
disableAlpha: true,
|
@@ -198,61 +255,14 @@ function ColorPanel(props) {
|
|
198
255
|
}))))));
|
199
256
|
}
|
200
257
|
|
258
|
+
ColorPanel.propTypes = {
|
259
|
+
dataSource: PropTypes.array
|
260
|
+
};
|
201
261
|
ColorPanel.defaultProps = {
|
202
262
|
value: undefined,
|
203
263
|
showClear: false,
|
204
|
-
dataSource:
|
205
|
-
|
206
|
-
borderColor: 'rgba(219, 219, 219, 1)'
|
207
|
-
}, {
|
208
|
-
color: 'rgba(245, 245, 245, 1)',
|
209
|
-
borderColor: 'rgba(208, 208, 208, 1)'
|
210
|
-
}, {
|
211
|
-
color: 'rgba(230, 230, 230, 1)',
|
212
|
-
borderColor: 'rgba(196, 196, 196, 1)'
|
213
|
-
}, {
|
214
|
-
color: 'rgba(168, 168, 168, 1)',
|
215
|
-
borderColor: 'rgba(146, 146, 146, 1)'
|
216
|
-
}, {
|
217
|
-
color: 'rgba(97, 97, 97, 1)',
|
218
|
-
borderColor: 'rgba(85, 85, 85, 1)'
|
219
|
-
}, {
|
220
|
-
color: 'rgba(49, 49, 49, 1)',
|
221
|
-
borderColor: 'rgba(43, 43, 43, 1)'
|
222
|
-
}, {
|
223
|
-
color: 'rgba(251, 115, 80, 1)',
|
224
|
-
borderColor: 'rgba(213, 98, 69, 1)'
|
225
|
-
}, {
|
226
|
-
color: 'rgba(255, 166, 41, 1)',
|
227
|
-
borderColor: 'rgba(219, 144, 45, 1)'
|
228
|
-
}, {
|
229
|
-
color: 'rgba(255, 205, 42, 1)',
|
230
|
-
borderColor: 'rgba(216, 175, 37, 1)'
|
231
|
-
}, {
|
232
|
-
color: 'rgba(18, 174, 92, 1)',
|
233
|
-
borderColor: 'rgba(23, 148, 79, 1)'
|
234
|
-
}, {
|
235
|
-
color: 'rgba(83, 184, 255, 1)',
|
236
|
-
borderColor: 'rgba(74, 156, 217, 1)'
|
237
|
-
}, {
|
238
|
-
color: 'rgba(183, 128, 255, 1)',
|
239
|
-
borderColor: 'rgba(155, 109, 216, 1)'
|
240
|
-
}, {
|
241
|
-
color: 'rgba(254, 192, 174, 1)',
|
242
|
-
borderColor: 'rgba(217, 163, 148, 1)'
|
243
|
-
}, {
|
244
|
-
color: 'rgba(252, 209, 156, 1)',
|
245
|
-
borderColor: 'rgba(215, 178, 133, 1)'
|
246
|
-
}, {
|
247
|
-
color: 'rgba(255, 232, 163, 1)',
|
248
|
-
borderColor: 'rgba(217, 198, 139, 1)'
|
249
|
-
}, {
|
250
|
-
color: 'rgba(176, 244, 197, 1)',
|
251
|
-
borderColor: 'rgba(153, 209, 171, 1)'
|
252
|
-
}, {
|
253
|
-
color: 'rgba(189, 227, 255, 1)',
|
254
|
-
borderColor: 'rgba(161, 193, 217, 1)'
|
255
|
-
}],
|
264
|
+
dataSource: defaultColorList,
|
265
|
+
colorPickerBalloonProps: {},
|
256
266
|
onChange: function onChange() {},
|
257
267
|
onPickerFocus: function onPickerFocus() {},
|
258
268
|
onPickerBlur: function onPickerBlur() {}
|
@@ -97,6 +97,11 @@ function SubListItem(props) {
|
|
97
97
|
var subNode = topo.getData().nodes.find(function (node) {
|
98
98
|
return node.ciId === alarmInfo.mainCiId;
|
99
99
|
});
|
100
|
+
|
101
|
+
var _useState = useState(),
|
102
|
+
balloonVisible = _useState[0],
|
103
|
+
setBalloonVisible = _useState[1];
|
104
|
+
|
100
105
|
var plarm = alarmInfo.cmpCode ? "\u3010" + (subNode === null || subNode === void 0 ? void 0 : subNode.sourceName) + "\u3011" : "【本级平台】";
|
101
106
|
return /*#__PURE__*/React.createElement(_List.Item, {
|
102
107
|
className: styles.AlarmListItem,
|
@@ -118,6 +123,8 @@ function SubListItem(props) {
|
|
118
123
|
}, "\u67E5\u770B\u8BE6\u60C5"),
|
119
124
|
closable: true,
|
120
125
|
triggerType: "click",
|
126
|
+
visible: balloonVisible,
|
127
|
+
onVisibleChange: setBalloonVisible,
|
121
128
|
align: "bl",
|
122
129
|
popupClassName: styles["enjoydata-alarm-table-balloon"],
|
123
130
|
popupStyle: {
|
@@ -126,7 +133,9 @@ function SubListItem(props) {
|
|
126
133
|
}
|
127
134
|
}, creatAlarmTips(_extends({}, alarmInfo, {
|
128
135
|
sourceName: plarm
|
129
|
-
})
|
136
|
+
}), function () {
|
137
|
+
setBalloonVisible(false);
|
138
|
+
})) : /*#__PURE__*/React.createElement("div", {
|
130
139
|
className: styles.listLink
|
131
140
|
}, /*#__PURE__*/React.createElement(Link, {
|
132
141
|
onClick: onClick,
|
@@ -3,33 +3,20 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
3
3
|
|
4
4
|
/* eslint-disable jsx-a11y/alt-text */
|
5
5
|
import React, { useState } from 'react';
|
6
|
-
import
|
6
|
+
import FontColorDropdown from "./components/FontColorDropdown";
|
7
7
|
import WidgetBox from "./WidgetBox";
|
8
|
-
import ColorPanel from "../../../../../components/ColorPanel";
|
9
|
-
import FontColorRange from "../../../../../components/ColorPanel/components/FontColorRange";
|
10
|
-
import styles from "./FontColorButton.module.scss";
|
11
8
|
import textStyleSettingRouter from "./components/textStyleSetting/textStyleSettingRouter.js";
|
12
9
|
|
13
|
-
function
|
14
|
-
var
|
15
|
-
onChange = props.onChange,
|
10
|
+
function FontColorButton(props) {
|
11
|
+
var showLabel = props.showLabel,
|
16
12
|
topo = props.topo,
|
17
|
-
|
18
|
-
background = props.background,
|
13
|
+
style = props.style,
|
19
14
|
setStyle = props.setStyle,
|
20
|
-
|
21
|
-
fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled;
|
22
|
-
|
23
|
-
var _useState = useState(false),
|
24
|
-
disabled = _useState[0],
|
25
|
-
setDisabled = _useState[1];
|
26
|
-
|
27
|
-
var backgroundEnabled = fieldDisabled.background !== true;
|
28
|
-
var opacityEnabled = fieldDisabled.opacity !== true;
|
15
|
+
fieldDisabled = props.fieldDisabled;
|
29
16
|
|
30
17
|
var backOpacityChange = function backOpacityChange(value) {
|
31
18
|
topo.historyManager.beginTransaction();
|
32
|
-
|
19
|
+
setStyle({
|
33
20
|
opacity: (value / 100).toFixed(2) * 1
|
34
21
|
});
|
35
22
|
topo.historyManager.endTransaction();
|
@@ -111,84 +98,16 @@ function FontColorDropdown(props) {
|
|
111
98
|
};
|
112
99
|
}();
|
113
100
|
|
114
|
-
var onFocus = function onFocus() {// topo.historyManager.beginTransaction();
|
115
|
-
};
|
116
|
-
|
117
|
-
var onBlur = function onBlur() {// topo.historyManager.endTransaction();
|
118
|
-
};
|
119
|
-
|
120
|
-
var icon = disabled ? /*#__PURE__*/React.createElement("img", {
|
121
|
-
src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Disable.svg",
|
122
|
-
alt: ""
|
123
|
-
}) : /*#__PURE__*/React.createElement("img", {
|
124
|
-
src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Normal.svg",
|
125
|
-
alt: ""
|
126
|
-
});
|
127
|
-
return /*#__PURE__*/React.createElement(DropdownButton, {
|
128
|
-
disabled: disabled,
|
129
|
-
trigger: icon
|
130
|
-
}, /*#__PURE__*/React.createElement("div", {
|
131
|
-
className: styles.content
|
132
|
-
}, /*#__PURE__*/React.createElement("div", {
|
133
|
-
className: styles.fontColor
|
134
|
-
}, /*#__PURE__*/React.createElement("span", null, "\u5B57\u4F53\u989C\u8272"), /*#__PURE__*/React.createElement("div", {
|
135
|
-
style: {
|
136
|
-
marginTop: '10px',
|
137
|
-
marginLeft: '-4px'
|
138
|
-
}
|
139
|
-
}, /*#__PURE__*/React.createElement(ColorPanel, {
|
140
|
-
value: color,
|
141
|
-
onChange: colorChang,
|
142
|
-
onPickerFocus: onFocus,
|
143
|
-
onPickerBlur: onBlur
|
144
|
-
}))), (backgroundEnabled || opacityEnabled) && /*#__PURE__*/React.createElement("div", {
|
145
|
-
className: styles.backgroundColor
|
146
|
-
}, /*#__PURE__*/React.createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/React.createElement("div", {
|
147
|
-
className: styles.backOpacity
|
148
|
-
}, /*#__PURE__*/React.createElement("img", {
|
149
|
-
src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
|
150
|
-
}), /*#__PURE__*/React.createElement(FontColorRange, {
|
151
|
-
max: 100,
|
152
|
-
min: 0,
|
153
|
-
unit: "%",
|
154
|
-
list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
|
155
|
-
onChange: backOpacityChange,
|
156
|
-
defaultValue: opacity === undefined ? opacity : Math.round(opacity * 100) // disabled={!background}
|
157
|
-
|
158
|
-
})), /*#__PURE__*/React.createElement("div", {
|
159
|
-
style: {
|
160
|
-
marginTop: '10px',
|
161
|
-
marginLeft: '-4px',
|
162
|
-
marginBottom: '3px'
|
163
|
-
}
|
164
|
-
}, /*#__PURE__*/React.createElement(ColorPanel, {
|
165
|
-
showClear: true,
|
166
|
-
value: background,
|
167
|
-
onChange: backgroundChang,
|
168
|
-
onPickerFocus: onFocus,
|
169
|
-
onPickerBlur: onBlur
|
170
|
-
})))));
|
171
|
-
}
|
172
|
-
|
173
|
-
function FontColorButton(props) {
|
174
|
-
var showLabel = props.showLabel,
|
175
|
-
topo = props.topo,
|
176
|
-
style = props.style,
|
177
|
-
setStyle = props.setStyle,
|
178
|
-
fieldDisabled = props.fieldDisabled;
|
179
101
|
return /*#__PURE__*/React.createElement(WidgetBox, {
|
180
102
|
label: "\u6587\u5B57\u989C\u8272",
|
181
103
|
tooltip: "\u6587\u5B57\u989C\u8272",
|
182
104
|
showLabel: showLabel
|
183
105
|
}, /*#__PURE__*/React.createElement(FontColorDropdown, {
|
184
|
-
|
185
|
-
background: style.background,
|
186
|
-
opacity: style.opacity,
|
106
|
+
value: style,
|
187
107
|
fieldDisabled: fieldDisabled,
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
},
|
108
|
+
onColorChange: colorChang,
|
109
|
+
onBackgroundChange: backgroundChang,
|
110
|
+
onOpacityChange: backOpacityChange,
|
192
111
|
topo: topo
|
193
112
|
}));
|
194
113
|
}
|
@@ -0,0 +1,120 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
3
|
+
var _excluded = ["topo", "value", "onChange", "fieldDisabled"];
|
4
|
+
|
5
|
+
/* eslint-disable jsx-a11y/alt-text */
|
6
|
+
import React, { useState } from 'react';
|
7
|
+
import DropdownButton from "./DropdownButton";
|
8
|
+
import ColorPanel from "../../../../../../components/ColorPanel";
|
9
|
+
import FontColorRange from "../../../../../../components/ColorPanel/components/FontColorRange";
|
10
|
+
import styles from "./FontColorDropdown.module.scss";
|
11
|
+
|
12
|
+
function FontColorDropdown(props) {
|
13
|
+
var color = props.color,
|
14
|
+
opacity = props.opacity,
|
15
|
+
background = props.background,
|
16
|
+
_props$fieldDisabled = props.fieldDisabled,
|
17
|
+
fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
|
18
|
+
colorPickerBalloonProps = props.colorPickerBalloonProps,
|
19
|
+
backgroundPickerBalloonProps = props.backgroundPickerBalloonProps,
|
20
|
+
onChange = props.onChange,
|
21
|
+
onColorChange = props.onColorChange,
|
22
|
+
onBackgroundChange = props.onBackgroundChange,
|
23
|
+
onOpacityChange = props.onOpacityChange;
|
24
|
+
|
25
|
+
var _useState = useState(false),
|
26
|
+
disabled = _useState[0],
|
27
|
+
setDisabled = _useState[1];
|
28
|
+
|
29
|
+
var backgroundEnabled = fieldDisabled.background !== true;
|
30
|
+
var opacityEnabled = fieldDisabled.opacity !== true;
|
31
|
+
|
32
|
+
var onFocus = function onFocus() {};
|
33
|
+
|
34
|
+
var onBlur = function onBlur() {};
|
35
|
+
|
36
|
+
var icon = disabled ? /*#__PURE__*/React.createElement("img", {
|
37
|
+
src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Disable.svg",
|
38
|
+
alt: ""
|
39
|
+
}) : /*#__PURE__*/React.createElement("img", {
|
40
|
+
src: "/img/topo/editor/toolbar/\u6587\u5B57\u989C\u8272\u53CA\u586B\u5145/Normal.svg",
|
41
|
+
alt: ""
|
42
|
+
});
|
43
|
+
return /*#__PURE__*/React.createElement(DropdownButton, {
|
44
|
+
disabled: disabled,
|
45
|
+
trigger: icon
|
46
|
+
}, /*#__PURE__*/React.createElement("div", {
|
47
|
+
className: styles.content
|
48
|
+
}, /*#__PURE__*/React.createElement("div", {
|
49
|
+
className: styles.fontColor
|
50
|
+
}, /*#__PURE__*/React.createElement("span", null, "\u5B57\u4F53\u989C\u8272"), /*#__PURE__*/React.createElement("div", {
|
51
|
+
style: {
|
52
|
+
marginTop: '10px',
|
53
|
+
marginLeft: '-4px'
|
54
|
+
}
|
55
|
+
}, /*#__PURE__*/React.createElement(ColorPanel, {
|
56
|
+
value: color,
|
57
|
+
colorPickerBalloonProps: colorPickerBalloonProps,
|
58
|
+
onChange: onColorChange,
|
59
|
+
onPickerFocus: onFocus,
|
60
|
+
onPickerBlur: onBlur
|
61
|
+
}))), (backgroundEnabled || opacityEnabled) && /*#__PURE__*/React.createElement("div", {
|
62
|
+
className: styles.backgroundColor
|
63
|
+
}, /*#__PURE__*/React.createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/React.createElement("div", {
|
64
|
+
className: styles.backOpacity
|
65
|
+
}, /*#__PURE__*/React.createElement("img", {
|
66
|
+
src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
|
67
|
+
}), /*#__PURE__*/React.createElement(FontColorRange, {
|
68
|
+
max: 100,
|
69
|
+
min: 0,
|
70
|
+
unit: "%",
|
71
|
+
list: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
|
72
|
+
onChange: onOpacityChange,
|
73
|
+
defaultValue: opacity === undefined ? opacity : Math.round(opacity * 100) // disabled={!background}
|
74
|
+
|
75
|
+
})), /*#__PURE__*/React.createElement("div", {
|
76
|
+
style: {
|
77
|
+
marginTop: '10px',
|
78
|
+
marginLeft: '-4px',
|
79
|
+
marginBottom: '3px'
|
80
|
+
}
|
81
|
+
}, /*#__PURE__*/React.createElement(ColorPanel, {
|
82
|
+
showClear: true,
|
83
|
+
value: background,
|
84
|
+
colorPickerBalloonProps: backgroundPickerBalloonProps,
|
85
|
+
onChange: onBackgroundChange,
|
86
|
+
onPickerFocus: onFocus,
|
87
|
+
onPickerBlur: onBlur
|
88
|
+
})))));
|
89
|
+
}
|
90
|
+
/**
|
91
|
+
*
|
92
|
+
* @param {*} props
|
93
|
+
* @param {{color, background, opacity}} props.value
|
94
|
+
* @returns
|
95
|
+
*/
|
96
|
+
|
97
|
+
|
98
|
+
function FontColorD(props) {
|
99
|
+
var topo = props.topo,
|
100
|
+
value = props.value,
|
101
|
+
onChange = props.onChange,
|
102
|
+
fieldDisabled = props.fieldDisabled,
|
103
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
104
|
+
|
105
|
+
return /*#__PURE__*/React.createElement(FontColorDropdown, _extends({}, otherProps, {
|
106
|
+
color: value.color,
|
107
|
+
background: value.background,
|
108
|
+
opacity: value.opacity,
|
109
|
+
fieldDisabled: fieldDisabled,
|
110
|
+
setStyle: onChange,
|
111
|
+
onChange: onChange,
|
112
|
+
topo: topo
|
113
|
+
}));
|
114
|
+
}
|
115
|
+
|
116
|
+
ColorPanel.defaultProps = {
|
117
|
+
colorPickerBalloonProps: {},
|
118
|
+
backgroundPickerBalloonProps: {}
|
119
|
+
};
|
120
|
+
export default FontColorD;
|
@@ -0,0 +1,45 @@
|
|
1
|
+
@import "@alifd/next/variables";
|
2
|
+
|
3
|
+
.content {
|
4
|
+
margin: 4px 0px 0px 6px;
|
5
|
+
color:$color-text1-4;
|
6
|
+
.fontColor{
|
7
|
+
width: 100%;
|
8
|
+
margin-bottom: 16px;
|
9
|
+
.colorPanelBox{
|
10
|
+
padding: 9px;
|
11
|
+
padding-top: 8px;
|
12
|
+
}
|
13
|
+
&>span{
|
14
|
+
font-size: 12px;
|
15
|
+
font-family: PingFangSC-Regular, PingFang SC;
|
16
|
+
font-weight: 400;
|
17
|
+
color: $color-text1-4;
|
18
|
+
line-height: 17px;
|
19
|
+
}
|
20
|
+
|
21
|
+
}
|
22
|
+
.backgroundColor{
|
23
|
+
width: 100%;
|
24
|
+
height: 159px;
|
25
|
+
.colorPanelBox{
|
26
|
+
padding: 9px;
|
27
|
+
padding-top: 0px;
|
28
|
+
}
|
29
|
+
&>span{
|
30
|
+
font-size: 12px;
|
31
|
+
color: black;
|
32
|
+
font-family: PingFangSC-Regular, PingFang SC;
|
33
|
+
font-weight: 400;
|
34
|
+
color: $color-text1-4;
|
35
|
+
line-height: 17px;
|
36
|
+
}
|
37
|
+
.backOpacity{
|
38
|
+
margin-top: 5px;
|
39
|
+
margin-bottom: 5px;
|
40
|
+
line-height: 8px;
|
41
|
+
display: flex;
|
42
|
+
flex-direction: row;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
}
|
@@ -32,7 +32,25 @@ function FontStyleSelect(props) {
|
|
32
32
|
disabled = props.disabled,
|
33
33
|
onChange = props.onChange,
|
34
34
|
_props$fieldDisabled = props.fieldDisabled,
|
35
|
-
fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled
|
35
|
+
fieldDisabled = _props$fieldDisabled === void 0 ? {} : _props$fieldDisabled,
|
36
|
+
hideItemTootip = props.hideItemTootip;
|
37
|
+
|
38
|
+
var renderMenuItemContent = function renderMenuItemContent(item) {
|
39
|
+
return /*#__PURE__*/React.createElement("div", {
|
40
|
+
style: {
|
41
|
+
display: 'flex',
|
42
|
+
alignItems: 'center'
|
43
|
+
}
|
44
|
+
}, /*#__PURE__*/React.createElement("img", {
|
45
|
+
src: "/img/topo/editor/toolbar/" + item.icon + "/" + (fieldDisabled[item.key] ? 'Disable' : 'Normal') + ".svg",
|
46
|
+
alt: ""
|
47
|
+
}), /*#__PURE__*/React.createElement("span", {
|
48
|
+
style: fieldDisabled[item.key] ? {} : {
|
49
|
+
color: variables['$color-text1-4']
|
50
|
+
}
|
51
|
+
}, item.label));
|
52
|
+
};
|
53
|
+
|
36
54
|
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
37
55
|
value: value,
|
38
56
|
valueRender: function valueRender() {
|
@@ -48,20 +66,8 @@ function FontStyleSelect(props) {
|
|
48
66
|
return /*#__PURE__*/React.createElement(DropdownMenu.Item, {
|
49
67
|
key: item.key,
|
50
68
|
disabled: !!fieldDisabled[item.key]
|
51
|
-
}, /*#__PURE__*/React.createElement(Tooltip, {
|
52
|
-
trigger:
|
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)),
|
69
|
+
}, hideItemTootip ? renderMenuItemContent(item) : /*#__PURE__*/React.createElement(Tooltip, {
|
70
|
+
trigger: renderMenuItemContent(item),
|
65
71
|
align: "r",
|
66
72
|
popupStyle: {}
|
67
73
|
}, item.tooltip));
|
@@ -1142,7 +1142,8 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
1142
1142
|
*/
|
1143
1143
|
onSaveTopo: onSaveTopo,
|
1144
1144
|
getResourceConfigFromHt: resourceConfig.getConfigFromHt,
|
1145
|
-
onLayerAdded: onLayerAdded
|
1145
|
+
onLayerAdded: onLayerAdded,
|
1146
|
+
findUNExistedLinkElements: findUNExistedLinkElements
|
1146
1147
|
};
|
1147
1148
|
};
|
1148
1149
|
|
@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
|
|
24
24
|
import SelectionModel from "./SelectionModel";
|
25
25
|
import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
|
26
26
|
|
27
|
-
var version = typeof "12.1.
|
27
|
+
var version = typeof "12.1.3" === 'string' ? "12.1.3" : null;
|
28
28
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
29
29
|
/**
|
30
30
|
* 拓扑显示和编辑
|
@@ -41,11 +41,11 @@ export function saveTopo(_x) {
|
|
41
41
|
|
42
42
|
function _saveTopo() {
|
43
43
|
_saveTopo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
|
44
|
-
var topoService, topoId, template, layout, backgroundId, globalConfig, serialize, resources, groups,
|
44
|
+
var topoService, topoId, template, layout, backgroundId, globalConfig, serialize, resources, groups, viewGroupId, groupInfo, viewResources;
|
45
45
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
46
46
|
while (1) switch (_context.prev = _context.next) {
|
47
47
|
case 0:
|
48
|
-
topoService = data.topoService, topoId = data.id, template = data.template, layout = data.layout, backgroundId = data.backgroundId, globalConfig = data.globalConfig, serialize = data.serialize, resources = data.resources, groups = data.groups,
|
48
|
+
topoService = data.topoService, topoId = data.id, template = data.template, layout = data.layout, backgroundId = data.backgroundId, globalConfig = data.globalConfig, serialize = data.serialize, resources = data.resources, groups = data.groups, viewGroupId = data.viewGroupId;
|
49
49
|
rlog.debug("saveTopo", data); // 保存布局
|
50
50
|
|
51
51
|
if (!(template && layout)) {
|
@@ -97,8 +97,7 @@ function _saveTopo() {
|
|
97
97
|
rlog.debug("saveTopo-groupInfo", groupInfo);
|
98
98
|
_context.next = 15;
|
99
99
|
return topoService.bindResourceToTopo(topoId, {
|
100
|
-
groups: groupInfo
|
101
|
-
relateTopoIdList: relateTopoIdList
|
100
|
+
groups: groupInfo
|
102
101
|
});
|
103
102
|
|
104
103
|
case 15:
|