@riil-frontend/component-topology 9.0.0-a.17 → 9.0.0-a.19

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 (14) hide show
  1. package/build/index.js +1 -1
  2. package/es/core/components/TopoView/GraphViewPanel.js +3 -2
  3. package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +1 -1
  4. package/es/core/editor/config/themes.js +53 -2
  5. package/es/core/hooks/useCanvasTheme.js +8 -1
  6. package/es/core/models/TopoApp.js +1 -1
  7. package/es/networkTopo/models/LinkDynamicStyleExecutor.js +5 -5
  8. package/lib/core/components/TopoView/GraphViewPanel.js +3 -2
  9. package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +1 -1
  10. package/lib/core/editor/config/themes.js +53 -2
  11. package/lib/core/hooks/useCanvasTheme.js +8 -1
  12. package/lib/core/models/TopoApp.js +1 -1
  13. package/lib/networkTopo/models/LinkDynamicStyleExecutor.js +5 -5
  14. package/package.json +2 -2
package/es/core/components/TopoView/GraphViewPanel.js CHANGED
@@ -12,7 +12,8 @@ export default function GraphViewPanel(props) {
12
12
  themeName: themeName,
13
13
  hideBackgroundColor: hideBackgroundColor
14
14
  }),
15
- canvasColor = _useCanvasTheme.canvasColor;
15
+ canvasColor = _useCanvasTheme.canvasColor,
16
+ canvasbackgroundImage = _useCanvasTheme.canvasbackgroundImage;
16
17
 
17
18
  useEffect(function () {
18
19
  // eslint-disable-next-line no-underscore-dangle
@@ -31,7 +32,7 @@ export default function GraphViewPanel(props) {
31
32
  return /*#__PURE__*/React.createElement("div", {
32
33
  className: styles.viewPanel,
33
34
  style: {
34
- background: canvasColor
35
+ background: canvasColor || "url(" + canvasbackgroundImage + ")"
35
36
  },
36
37
  onFocus: onFocus
37
38
  }, props.children);
package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js CHANGED
@@ -21,7 +21,7 @@ export default function CanvasPanel(props) {
21
21
  }, /*#__PURE__*/React.createElement(_Tag.Selectable, {
22
22
  className: styles.tag,
23
23
  style: {
24
- background: item.color
24
+ background: item.color || "url(" + item.backgroundImageThumbnail + ")"
25
25
  },
26
26
  checked: item.name === canvasThemeName,
27
27
  onChange: function onChange(checked) {
package/es/core/editor/config/themes.js CHANGED
@@ -22,7 +22,9 @@ var baseLightTheme = {
22
22
  'group.title.color': '#4D6277',
23
23
  // 标题文字颜色
24
24
  'group.background': 'rgba(255, 255, 255, 0.9)',
25
- 'group.border.color': '#E4E9EE' // 边框颜色
25
+ 'group.border.color': '#E4E9EE',
26
+ // 边框颜色
27
+ 'group.splitLine': false // 标题底部边框
26
28
 
27
29
  }
28
30
  },
@@ -84,7 +86,56 @@ var THEMES = [_extends({}, baseLightTheme, {
84
86
  'group.title.color': '#FFFFFF',
85
87
  // 标题文字颜色
86
88
  'group.background': 'rgba(29,55,113,0.6)',
87
- 'group.border.color': 'rgba(8,165,244,0.8)' // 边框颜色
89
+ 'group.border.color': 'rgba(8,165,244,0.8)',
90
+ // 边框颜色
91
+ 'group.splitLine': false // 标题底部边框
92
+
93
+ }
94
+ },
95
+ cluster: {
96
+ style: {
97
+ 'group.title.color': '#FFFFFF',
98
+ // 标题文字颜色
99
+ 'group.title.background': 'rgba(14,44,69,1)',
100
+ // 标题背景颜色 #0E2C45
101
+ 'group.background': 'rgba(14,44,69,1)',
102
+ // #0E2C45
103
+ 'group.border.color': '#08A5F4',
104
+ // 边框颜色
105
+ 'group.border.radius': 3
106
+ }
107
+ }
108
+ }, {
109
+ name: 'poly',
110
+ label: 'Poly',
111
+ toolsTheme: 'black',
112
+ backgroundImage: '/img/topo/themes/poly.png',
113
+ backgroundImageThumbnail: '/img/topo/themes/poly_thumbnail.png',
114
+ globalNodeLabelStyle: {
115
+ color: '#ffffff'
116
+ },
117
+ globalEdgeTagStyle: {
118
+ color: '#E4E9EE',
119
+ background: 'rgba(6, 54, 88, 1)',
120
+ // 背景色，不传使用默认内置 @V1.2 index.js:1 #063658
121
+ borderColor: '#08A5F4' // 边框颜色，不传使用默认内置。用于主题切换 @V1.2
122
+
123
+ },
124
+ text: {
125
+ color: '#ffffff'
126
+ },
127
+ group: {
128
+ style: {
129
+ 'group.title.background': 'rgba(0,0,0,0)',
130
+ // 标题背景颜色 #08A5F4
131
+ 'group.title.color': '#8FECFF',
132
+ // 标题文字颜色
133
+ 'group.title.border.color': '#ffffff',
134
+ // 边框颜色
135
+ 'group.background': 'rgba(0,0,0,0)',
136
+ 'group.border.color': '#ffffff',
137
+ // 边框颜色
138
+ 'group.splitLine': true // 标题底部边框
88
139
 
89
140
  }
90
141
  },
package/es/core/hooks/useCanvasTheme.js CHANGED
@@ -23,6 +23,11 @@ var themeMap = [{
23
23
  label: '深色',
24
24
  color: '#031425',
25
25
  toolsTheme: 'black'
26
+ }, {
27
+ name: 'poly',
28
+ label: 'Poly',
29
+ toolsTheme: 'black',
30
+ backgroundImage: '/img/topo/themes/poly.png'
26
31
  }].reduce(function (map, item) {
27
32
  var _extends2;
28
33
 
@@ -38,6 +43,7 @@ export default function useCanvasTheme(props) {
38
43
 
39
44
  var themeConfig = themeMap[themeName || 'white'];
40
45
  var canvasColor = hideBackgroundColor ? null : themeConfig.color;
46
+ var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
41
47
  useEffect(function () {
42
48
  // 设置
43
49
  if (graphLoaded && themeConfig) {
@@ -60,6 +66,7 @@ export default function useCanvasTheme(props) {
60
66
  }
61
67
  }, [graphLoaded, canvasColor]);
62
68
  return {
63
- canvasColor: canvasColor
69
+ canvasColor: canvasColor,
70
+ canvasbackgroundImage: canvasbackgroundImage
64
71
  };
65
72
  }
package/es/core/models/TopoApp.js CHANGED
@@ -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 "9.0.0-a.17" === 'string' ? "9.0.0-a.17" : null;
27
+ var version = typeof "9.0.0-a.19" === 'string' ? "9.0.0-a.19" : null;
28
28
  console.info("\u62D3\u6251\u7248\u672C: " + version);
29
29
  /**
30
30
  * 拓扑显示和编辑
package/es/networkTopo/models/LinkDynamicStyleExecutor.js CHANGED
@@ -5,15 +5,15 @@ import { getLinksBetweenNodes } from "../utils/linkUtil"; // network_link.actual
5
5
 
6
6
  function calcEdgeWidth(actualBandwidth) {
7
7
  if (!actualBandwidth) {
8
- return 2;
8
+ return 3;
9
9
  } else if (actualBandwidth <= 100) {
10
- return 2;
11
- } else if (actualBandwidth <= 1000) {
12
10
  return 3;
13
- } else if (actualBandwidth <= 10000) {
11
+ } else if (actualBandwidth <= 1000) {
14
12
  return 4;
15
- } else if (actualBandwidth > 10000) {
13
+ } else if (actualBandwidth <= 10000) {
16
14
  return 5;
15
+ } else if (actualBandwidth > 10000) {
16
+ return 6;
17
17
  }
18
18
  }
19
19
 
package/lib/core/components/TopoView/GraphViewPanel.js CHANGED
@@ -26,7 +26,8 @@ function GraphViewPanel(props) {
26
26
  themeName: themeName,
27
27
  hideBackgroundColor: hideBackgroundColor
28
28
  }),
29
- canvasColor = _useCanvasTheme.canvasColor;
29
+ canvasColor = _useCanvasTheme.canvasColor,
30
+ canvasbackgroundImage = _useCanvasTheme.canvasbackgroundImage;
30
31
 
31
32
  (0, _react.useEffect)(function () {
32
33
  // eslint-disable-next-line no-underscore-dangle
@@ -45,7 +46,7 @@ function GraphViewPanel(props) {
45
46
  return /*#__PURE__*/_react["default"].createElement("div", {
46
47
  className: _TopoViewModule["default"].viewPanel,
47
48
  style: {
48
- background: canvasColor
49
+ background: canvasColor || "url(" + canvasbackgroundImage + ")"
49
50
  },
50
51
  onFocus: onFocus
51
52
  }, props.children);
package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js CHANGED
@@ -36,7 +36,7 @@ function CanvasPanel(props) {
36
36
  }, /*#__PURE__*/_react["default"].createElement(_tag["default"].Selectable, {
37
37
  className: _CanvasPanelModule["default"].tag,
38
38
  style: {
39
- background: item.color
39
+ background: item.color || "url(" + item.backgroundImageThumbnail + ")"
40
40
  },
41
41
  checked: item.name === canvasThemeName,
42
42
  onChange: function onChange(checked) {
package/lib/core/editor/config/themes.js CHANGED
@@ -30,7 +30,9 @@ var baseLightTheme = {
30
30
  'group.title.color': '#4D6277',
31
31
  // 标题文字颜色
32
32
  'group.background': 'rgba(255, 255, 255, 0.9)',
33
- 'group.border.color': '#E4E9EE' // 边框颜色
33
+ 'group.border.color': '#E4E9EE',
34
+ // 边框颜色
35
+ 'group.splitLine': false // 标题底部边框
34
36
 
35
37
  }
36
38
  },
@@ -92,7 +94,56 @@ var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
92
94
  'group.title.color': '#FFFFFF',
93
95
  // 标题文字颜色
94
96
  'group.background': 'rgba(29,55,113,0.6)',
95
- 'group.border.color': 'rgba(8,165,244,0.8)' // 边框颜色
97
+ 'group.border.color': 'rgba(8,165,244,0.8)',
98
+ // 边框颜色
99
+ 'group.splitLine': false // 标题底部边框
100
+
101
+ }
102
+ },
103
+ cluster: {
104
+ style: {
105
+ 'group.title.color': '#FFFFFF',
106
+ // 标题文字颜色
107
+ 'group.title.background': 'rgba(14,44,69,1)',
108
+ // 标题背景颜色 #0E2C45
109
+ 'group.background': 'rgba(14,44,69,1)',
110
+ // #0E2C45
111
+ 'group.border.color': '#08A5F4',
112
+ // 边框颜色
113
+ 'group.border.radius': 3
114
+ }
115
+ }
116
+ }, {
117
+ name: 'poly',
118
+ label: 'Poly',
119
+ toolsTheme: 'black',
120
+ backgroundImage: '/img/topo/themes/poly.png',
121
+ backgroundImageThumbnail: '/img/topo/themes/poly_thumbnail.png',
122
+ globalNodeLabelStyle: {
123
+ color: '#ffffff'
124
+ },
125
+ globalEdgeTagStyle: {
126
+ color: '#E4E9EE',
127
+ background: 'rgba(6, 54, 88, 1)',
128
+ // 背景色，不传使用默认内置 @V1.2 index.js:1 #063658
129
+ borderColor: '#08A5F4' // 边框颜色，不传使用默认内置。用于主题切换 @V1.2
130
+
131
+ },
132
+ text: {
133
+ color: '#ffffff'
134
+ },
135
+ group: {
136
+ style: {
137
+ 'group.title.background': 'rgba(0,0,0,0)',
138
+ // 标题背景颜色 #08A5F4
139
+ 'group.title.color': '#8FECFF',
140
+ // 标题文字颜色
141
+ 'group.title.border.color': '#ffffff',
142
+ // 边框颜色
143
+ 'group.background': 'rgba(0,0,0,0)',
144
+ 'group.border.color': '#ffffff',
145
+ // 边框颜色
146
+ 'group.splitLine': true // 标题底部边框
96
147
 
97
148
  }
98
149
  },
package/lib/core/hooks/useCanvasTheme.js CHANGED
@@ -36,6 +36,11 @@ var themeMap = [{
36
36
  label: '深色',
37
37
  color: '#031425',
38
38
  toolsTheme: 'black'
39
+ }, {
40
+ name: 'poly',
41
+ label: 'Poly',
42
+ toolsTheme: 'black',
43
+ backgroundImage: '/img/topo/themes/poly.png'
39
44
  }].reduce(function (map, item) {
40
45
  var _extends2;
41
46
 
@@ -52,6 +57,7 @@ function useCanvasTheme(props) {
52
57
 
53
58
  var themeConfig = themeMap[themeName || 'white'];
54
59
  var canvasColor = hideBackgroundColor ? null : themeConfig.color;
60
+ var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
55
61
  (0, _react.useEffect)(function () {
56
62
  // 设置
57
63
  if (graphLoaded && themeConfig) {
@@ -74,6 +80,7 @@ function useCanvasTheme(props) {
74
80
  }
75
81
  }, [graphLoaded, canvasColor]);
76
82
  return {
77
- canvasColor: canvasColor
83
+ canvasColor: canvasColor,
84
+ canvasbackgroundImage: canvasbackgroundImage
78
85
  };
79
86
  }
package/lib/core/models/TopoApp.js CHANGED
@@ -56,7 +56,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
56
56
  var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
57
57
 
58
58
  // eslint-disable-next-line no-undef
59
- var version = typeof "9.0.0-a.17" === 'string' ? "9.0.0-a.17" : null;
59
+ var version = typeof "9.0.0-a.19" === 'string' ? "9.0.0-a.19" : null;
60
60
  console.info("\u62D3\u6251\u7248\u672C: " + version);
61
61
  /**
62
62
  * 拓扑显示和编辑
package/lib/networkTopo/models/LinkDynamicStyleExecutor.js CHANGED
@@ -16,15 +16,15 @@ var _linkUtil = require("../utils/linkUtil");
16
16
  // network_link.actual_bandwidth
17
17
  function calcEdgeWidth(actualBandwidth) {
18
18
  if (!actualBandwidth) {
19
- return 2;
19
+ return 3;
20
20
  } else if (actualBandwidth <= 100) {
21
- return 2;
22
- } else if (actualBandwidth <= 1000) {
23
21
  return 3;
24
- } else if (actualBandwidth <= 10000) {
22
+ } else if (actualBandwidth <= 1000) {
25
23
  return 4;
26
- } else if (actualBandwidth > 10000) {
24
+ } else if (actualBandwidth <= 10000) {
27
25
  return 5;
26
+ } else if (actualBandwidth > 10000) {
27
+ return 6;
28
28
  }
29
29
  }
30
30
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riil-frontend/component-topology",
3
- "version": "9.0.0-a.17",
3
+ "version": "9.0.0-a.19",
4
4
  "description": "拓扑",
5
5
  "scripts": {
6
6
  "start": "build-scripts start",
@@ -116,6 +116,6 @@
116
116
  "access": "public"
117
117
  },
118
118
  "license": "MIT",
119
- "homepage": "https://unpkg.com/@riil-frontend/component-topology@9.0.0-a.17/build/index.html",
119
+ "homepage": "https://unpkg.com/@riil-frontend/component-topology@9.0.0-a.19/build/index.html",
120
120
  "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
121
121
  }