@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.
Files changed (51) hide show
  1. package/build/1.js +2 -2
  2. package/build/2.js +1 -1
  3. package/build/index.css +1 -1
  4. package/build/index.js +19 -19
  5. package/es/components/ColorPanel/components/ColorBlock/index.module.scss +1 -0
  6. package/es/components/ColorPanel/components/FontColorRange/index.module.scss +3 -4
  7. package/es/components/ColorPanel/index.module.scss +4 -3
  8. package/es/components/collapse/Collapse.module.scss +5 -4
  9. package/es/core/components/TopoView/GraphViewPanel.js +1 -0
  10. package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +10 -67
  11. package/es/core/editor/components/Sidebar/views/CanvasPanel/themes.js +42 -0
  12. package/es/core/editor/components/Sidebar/views/CanvasPanel/useCanvasThemeConfig.js +116 -0
  13. package/es/core/editor/components/Sidebar/views/ImagePanel/HtCustomImagePanel.js +12 -1
  14. package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js +12 -2
  15. package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss +1 -1
  16. package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/Content.js +12 -3
  17. package/es/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
  18. package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.js +11 -31
  19. package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss +11 -6
  20. package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js +50 -0
  21. package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/edgeTag.js +7 -2
  22. package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/text.js +20 -5
  23. package/es/core/editor/components/settings/common/AlignSetting/AlignSetting.module.scss +3 -2
  24. package/es/core/editor/components/settings/common/AlignSetting/AlignTypeList.js +34 -30
  25. package/es/core/editor/components/settings/common/AlignSetting/index.js +3 -3
  26. package/es/core/hooks/useCanvasTheme.js +26 -12
  27. package/es/core/models/TopoApp.js +1 -1
  28. package/lib/components/ColorPanel/components/ColorBlock/index.module.scss +1 -0
  29. package/lib/components/ColorPanel/components/FontColorRange/index.module.scss +3 -4
  30. package/lib/components/ColorPanel/index.module.scss +4 -3
  31. package/lib/components/collapse/Collapse.module.scss +5 -4
  32. package/lib/core/components/TopoView/GraphViewPanel.js +1 -0
  33. package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +11 -66
  34. package/lib/core/editor/components/Sidebar/views/CanvasPanel/themes.js +47 -0
  35. package/lib/core/editor/components/Sidebar/views/CanvasPanel/useCanvasThemeConfig.js +128 -0
  36. package/lib/core/editor/components/Sidebar/views/ImagePanel/HtCustomImagePanel.js +13 -1
  37. package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js +13 -2
  38. package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss +1 -1
  39. package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/Content.js +12 -3
  40. package/lib/core/editor/components/Toolbar/widgets/EdgeColorButton/EdgeColorButton.js +2 -2
  41. package/lib/core/editor/components/Toolbar/widgets/NodeAlignWidget.js +11 -31
  42. package/lib/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss +11 -6
  43. package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js +61 -0
  44. package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/edgeTag.js +7 -2
  45. package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/text.js +20 -5
  46. package/lib/core/editor/components/settings/common/AlignSetting/AlignSetting.module.scss +3 -2
  47. package/lib/core/editor/components/settings/common/AlignSetting/AlignTypeList.js +33 -29
  48. package/lib/core/editor/components/settings/common/AlignSetting/index.js +3 -3
  49. package/lib/core/hooks/useCanvasTheme.js +26 -12
  50. package/lib/core/models/TopoApp.js +1 -1
  51. 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;
@@ -1,5 +1,5 @@
1
1
  .container {
2
2
  width: 100%;
3
3
  height: 100%;
4
- overflow: auto;
4
+ overflow: hidden;
5
5
  }
@@ -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", null, /*#__PURE__*/_react["default"].createElement("div", null, "\u7EBF"), /*#__PURE__*/_react["default"].createElement("div", {
24
+ return /*#__PURE__*/_react["default"].createElement("div", {
25
25
  style: {
26
- width: 200,
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: '-2px'
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(0); // eslint-disable-next-line eqeqeq
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
- leftDisable = _useState4[0],
49
- setLeftDisable = _useState4[1];
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
- getClickType: getClickType
110
+ distributionDisabled: distributionDisabled
131
111
  }), /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
132
- disabled: leftDisable,
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: rightDisable,
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-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
  }
@@ -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
- fontStyle: []
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: null,
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: 6px;
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: "left",
24
- label: "左对齐",
25
- icon: "tuopu_zuoceduiqi"
23
+ value: 'left',
24
+ label: '左对齐',
25
+ icon: 'tuopu_zuoceduiqi'
26
26
  }, {
27
- value: "center",
28
- label: "水平居中",
29
- icon: "tuopu_shuipingjuzhongduiqi"
27
+ value: 'center',
28
+ label: '水平居中',
29
+ icon: 'tuopu_shuipingjuzhongduiqi'
30
30
  }, {
31
- value: "right",
32
- label: "右对齐",
33
- icon: "tuopu_youceduiqi"
31
+ value: 'right',
32
+ label: '右对齐',
33
+ icon: 'tuopu_youceduiqi'
34
34
  }, {
35
- value: "top",
36
- label: "靠上对齐",
37
- icon: "tuopu_dingbuduiqi"
35
+ value: 'top',
36
+ label: '靠上对齐',
37
+ icon: 'tuopu_dingbuduiqi'
38
38
  }, {
39
- value: "middle",
40
- label: "垂直居中",
41
- icon: "tuopu_chuizhijuzhongduiqi"
39
+ value: 'middle',
40
+ label: '垂直居中',
41
+ icon: 'tuopu_chuizhijuzhongduiqi'
42
42
  }, {
43
- value: "bottom",
44
- label: "靠下对齐",
45
- icon: "tuopu_dibuduiqi"
43
+ value: 'bottom',
44
+ label: '靠下对齐',
45
+ icon: 'tuopu_dibuduiqi'
46
46
  }, {
47
- value: "divide"
47
+ value: 'divide'
48
48
  }, {
49
- value: "distributeHorizontal",
50
- label: "横向分布",
51
- icon: "tuopu_shuipingdengjianjuduiqi"
49
+ value: 'distributeHorizontal',
50
+ label: '横向分布',
51
+ icon: 'tuopu_shuipingdengjianjuduiqi'
52
52
  }, {
53
- value: "distributeVertical",
54
- label: "纵向分布",
55
- icon: "tuopu_chuizhidengjianjuduiqi"
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 ? "left" : _props$selected,
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 === "divide" ? /*#__PURE__*/_react["default"].createElement(_divider["default"], {
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
- getClickType = props.getClickType;
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
- value: 'white',
17
+ name: 'white',
18
18
  label: '白色',
19
- color: '#FFFFFF'
19
+ color: null,
20
+ toolsTheme: 'lightgrayblue'
20
21
  }, {
21
- value: 'lightblue',
22
+ name: 'lightblue',
22
23
  label: '蓝色',
23
- color: '#F9FBFF'
24
+ color: '#F9FBFF',
25
+ toolsTheme: 'white'
24
26
  }, {
25
- value: 'yellow',
27
+ name: 'yellow',
26
28
  label: '黄色',
27
29
  color: '#FFFDE6'
28
30
  }, {
29
- value: 'green',
31
+ name: 'green',
30
32
  label: '绿色',
31
33
  color: '#EAFFE8'
32
34
  }, {
33
- value: 'dark',
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.value] = item, _extends2));
42
+ return (0, _extends3["default"])({}, map, (_extends2 = {}, _extends2[item.name] = item, _extends2));
40
43
  }, {});
41
44
 
42
45
  function useCanvasTheme(props) {
43
- var canvasTheme = props.canvasTheme;
44
- (0, _react.useEffect)(function () {// 设置
45
- }, [canvasTheme]);
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.34" === 'string' ? "6.0.0-alpha.34" : null;
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.34",
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.34/build/index.html",
119
+ "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.37/build/index.html",
119
120
  "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
120
121
  }