@riil-frontend/component-topology 6.0.0-alpha.60 → 6.0.0-alpha.62

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 (22) hide show
  1. package/build/index.js +1 -1
  2. package/es/core/components/TopoView/GraphViewPanel.js +5 -4
  3. package/es/core/components/TopoView/topoView.js +2 -2
  4. package/es/core/editor/components/Sidebar/panes.js +5 -5
  5. package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js +2 -2
  6. package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/box.js +2 -1
  7. package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js +5 -2
  8. package/es/core/editor/config/themes.js +2 -2
  9. package/es/core/hooks/useCanvasTheme.js +6 -13
  10. package/es/core/models/TopoApp.js +1 -1
  11. package/es/core/store/models/customIcon.js +1 -3
  12. package/lib/core/components/TopoView/GraphViewPanel.js +5 -4
  13. package/lib/core/components/TopoView/topoView.js +2 -2
  14. package/lib/core/editor/components/Sidebar/panes.js +5 -5
  15. package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js +2 -2
  16. package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/box.js +2 -1
  17. package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js +5 -2
  18. package/lib/core/editor/config/themes.js +2 -2
  19. package/lib/core/hooks/useCanvasTheme.js +6 -13
  20. package/lib/core/models/TopoApp.js +1 -1
  21. package/lib/core/store/models/customIcon.js +1 -3
  22. package/package.json +2 -2
@@ -2,20 +2,21 @@ import React from 'react';
2
2
  import useCanvasTheme from "../../hooks/useCanvasTheme";
3
3
  import styles from "./TopoView.module.scss";
4
4
  export default function GraphViewPanel(props) {
5
- var topo = props.topo;
5
+ var topo = props.topo,
6
+ hideBackgroundColor = props.hideBackgroundColor;
6
7
  var displayConfig = topo.store.useModelState('displayConfig');
7
- var canvasTheme = displayConfig.canvasTheme || 'white';
8
+ var themeName = displayConfig.canvasTheme || 'white';
8
9
 
9
10
  var _useCanvasTheme = useCanvasTheme({
10
11
  topo: topo,
11
- canvasTheme: canvasTheme
12
+ themeName: themeName
12
13
  }),
13
14
  canvasColor = _useCanvasTheme.canvasColor;
14
15
 
15
16
  return /*#__PURE__*/React.createElement("div", {
16
17
  className: styles.viewPanel,
17
18
  style: {
18
- background: canvasColor
19
+ background: hideBackgroundColor ? null : canvasColor
19
20
  }
20
21
  }, props.children);
21
22
  }
@@ -226,9 +226,9 @@ var Topology = function Topology(props) {
226
226
  var renderCanvas = function renderCanvas() {
227
227
  var _graphViewProps$creat;
228
228
 
229
- return /*#__PURE__*/React.createElement(GraphViewPanel, {
229
+ return /*#__PURE__*/React.createElement(GraphViewPanel, _extends({
230
230
  topo: topo
231
- }, /*#__PURE__*/React.createElement(TopoGraph, _extends({}, graphViewProps, {
231
+ }, props), /*#__PURE__*/React.createElement(TopoGraph, _extends({}, graphViewProps, {
232
232
  createHtTopoProps: _extends({}, graphViewProps.createHtTopoProps, {
233
233
  editor: _extends({}, ((_graphViewProps$creat = graphViewProps.createHtTopoProps) === null || _graphViewProps$creat === void 0 ? void 0 : _graphViewProps$creat.editor) || {})
234
234
  }),
@@ -4,32 +4,32 @@ import ComponentPanel from "./views/ComponentPanel";
4
4
  import ImagePanel from "./views/ImagePanel";
5
5
  import LinkPanel from "./views/LinkPanel";
6
6
  var panes = [{
7
- key: '1',
7
+ key: 'link',
8
8
  title: '链路',
9
9
  titleTootip: '在两个节点之间添加链路&线',
10
10
  icon: '/img/topo/editor/sidebar/icon/链路.svg',
11
11
  content: LinkPanel
12
12
  }, {
13
13
  title: '组件',
14
- key: '2',
14
+ key: 'basicComponent',
15
15
  titleTootip: '基础组件',
16
16
  icon: '/img/topo/editor/sidebar/icon/组件.svg',
17
17
  content: ComponentPanel
18
18
  }, {
19
19
  title: '图片',
20
- key: '3',
20
+ key: 'image',
21
21
  titleTootip: '图片素材',
22
22
  icon: '/img/topo/editor/sidebar/icon/图片.svg',
23
23
  content: ImagePanel
24
24
  }, {
25
25
  title: '背景',
26
- key: '4',
26
+ key: 'background',
27
27
  titleTootip: '背景素材',
28
28
  icon: '/img/topo/editor/sidebar/icon/背景.svg',
29
29
  content: BackgroundPanel
30
30
  }, {
31
31
  title: '画布',
32
- key: '5',
32
+ key: 'canvas',
33
33
  titleTootip: '拓扑图画布底图',
34
34
  icon: '/img/topo/editor/sidebar/icon/画布.svg',
35
35
  content: CanvasPanel
@@ -45,8 +45,8 @@ export function formatRgbaColor(color) {
45
45
  }
46
46
  /**
47
47
  * 格式化背景rgba颜色
48
- * @param {{background, opacity}} prevColor
49
- * @param {{background, opacity}} currentColor
48
+ * @param {{background, opacity}} prevColor 原值
49
+ * @param {{background, opacity}} currentColor 新值
50
50
  */
51
51
 
52
52
  export function formatBackgroundRgbaColor(prevColor, currentColor) {
@@ -8,7 +8,7 @@ export function getTextStyle(element) {
8
8
  underline: underline
9
9
  }, fontStyleUtil.toMap(element.a('rectFont')), parseBackground(element.a('topLeftColor')));
10
10
  }
11
- export function setTextStyle(element, style) {
11
+ export function setTextStyle(element, style, topo) {
12
12
  if ('underline' in style) {}
13
13
 
14
14
  if ('color' in style) {
@@ -23,6 +23,7 @@ export function setTextStyle(element, style) {
23
23
 
24
24
  var fontStr = fontStyleUtil.build(fontStyle);
25
25
  element.a('rectFont', fontStr);
26
+ topo.getHtTopo().setRectangleText(element);
26
27
  }
27
28
  export default {
28
29
  getTextStyle: getTextStyle,
@@ -11,9 +11,12 @@ function GlobalTagStyleSetting(props) {
11
11
  var topo = props.topo;
12
12
 
13
13
  var Component = props.Component,
14
- widgetProps = _objectWithoutPropertiesLoose(props, _excluded);
14
+ widgetProps = _objectWithoutPropertiesLoose(props, _excluded); // const values = useValues(topo)
15
15
 
16
- var values = useValues(topo);
16
+
17
+ var values = useMemo(function () {
18
+ return {};
19
+ }, []);
17
20
  var setStyle = useMemo(function () {
18
21
  return function (style) {
19
22
  return setGlobalTagStyle(topo, style);
@@ -3,7 +3,7 @@ var baseLightTheme = {
3
3
  color: '#FFFFFF',
4
4
  globalNodeLabelColor: '#4d6277',
5
5
  globalEdgeTagStyle: {
6
- color: '#CBCBCB',
6
+ color: '#777B9A',
7
7
  background: '#FFFFFF',
8
8
  // 背景色,不传使用默认内置 @V1.2
9
9
  borderColor: '#CBCBCB' // 边框颜色,不传使用默认内置。用于主题切换 @V1.2
@@ -18,7 +18,7 @@ var baseLightTheme = {
18
18
  // 标题背景颜色
19
19
  'group.title.color': '#4D6277',
20
20
  // 标题文字颜色
21
- 'group.background': 'rgba(76, 137, 255, 0.1)',
21
+ 'group.background': 'rgba(255, 255, 255, 0.9)',
22
22
  'group.border.color': '#E4E9EE' // 边框颜色
23
23
 
24
24
  }
@@ -30,32 +30,25 @@ var themeMap = [{
30
30
  }, {});
31
31
  export default function useCanvasTheme(props) {
32
32
  var topo = props.topo,
33
- canvasTheme = props.canvasTheme; // 拓扑图是否加载
33
+ themeName = props.themeName; // 拓扑图是否加载
34
34
 
35
35
  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
36
36
  graphLoaded = _topo$store$useModelS.graphLoaded;
37
37
 
38
38
  useEffect(function () {
39
39
  // 设置
40
- var themeConfig = themeMap[canvasTheme || 'white'];
40
+ var themeConfig = themeMap[themeName || 'white'];
41
41
 
42
42
  if (graphLoaded && themeConfig) {
43
- var _topo$historyManager2;
44
-
45
43
  try {
46
- var _topo$historyManager;
47
-
48
- (_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, '切换主题');
49
- topo.getHtTopo().setToolsTheme(themeConfig.toolsTheme);
50
- topo.getHtTopo().setTheme(canvasTheme);
44
+ topo.getHtTopo().setTheme(themeName);
45
+ topo.getHtTopo().setToolsTheme(themeName);
51
46
  } catch (error) {
52
47
  console.error('切换主题失败', error);
53
48
  }
54
-
55
- (_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, '切换主题');
56
49
  }
57
- }, [canvasTheme, graphLoaded]);
50
+ }, [themeName, graphLoaded]);
58
51
  return {
59
- canvasColor: themeMap[canvasTheme].color
52
+ canvasColor: themeMap[themeName].color
60
53
  };
61
54
  }
@@ -23,7 +23,7 @@ import topoFactory from "./topoFactory";
23
23
  import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
24
24
  import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
25
25
 
26
- var version = typeof "6.0.0-alpha.60" === 'string' ? "6.0.0-alpha.60" : null;
26
+ var version = typeof "6.0.0-alpha.62" === 'string' ? "6.0.0-alpha.62" : null;
27
27
  console.info("\u62D3\u6251\u7248\u672C: " + version);
28
28
  /**
29
29
  * 拓扑显示和编辑
@@ -108,10 +108,8 @@ export default function (engine) {
108
108
 
109
109
  case 2:
110
110
  icons = _context2.sent;
111
- // 通知ht
112
- engine.view.topoClient.emitEvent('topo_shape_load', getEditorIcons(engine));
113
111
 
114
- case 4:
112
+ case 3:
115
113
  case "end":
116
114
  return _context2.stop();
117
115
  }
@@ -12,20 +12,21 @@ var _useCanvasTheme2 = _interopRequireDefault(require("../../hooks/useCanvasThem
12
12
  var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
13
13
 
14
14
  function GraphViewPanel(props) {
15
- var topo = props.topo;
15
+ var topo = props.topo,
16
+ hideBackgroundColor = props.hideBackgroundColor;
16
17
  var displayConfig = topo.store.useModelState('displayConfig');
17
- var canvasTheme = displayConfig.canvasTheme || 'white';
18
+ var themeName = displayConfig.canvasTheme || 'white';
18
19
 
19
20
  var _useCanvasTheme = (0, _useCanvasTheme2["default"])({
20
21
  topo: topo,
21
- canvasTheme: canvasTheme
22
+ themeName: themeName
22
23
  }),
23
24
  canvasColor = _useCanvasTheme.canvasColor;
24
25
 
25
26
  return /*#__PURE__*/_react["default"].createElement("div", {
26
27
  className: _TopoViewModule["default"].viewPanel,
27
28
  style: {
28
- background: canvasColor
29
+ background: hideBackgroundColor ? null : canvasColor
29
30
  }
30
31
  }, props.children);
31
32
  }
@@ -268,9 +268,9 @@ var Topology = function Topology(props) {
268
268
  var renderCanvas = function renderCanvas() {
269
269
  var _graphViewProps$creat;
270
270
 
271
- return /*#__PURE__*/_react["default"].createElement(_GraphViewPanel["default"], {
271
+ return /*#__PURE__*/_react["default"].createElement(_GraphViewPanel["default"], (0, _extends2["default"])({
272
272
  topo: topo
273
- }, /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], (0, _extends2["default"])({}, graphViewProps, {
273
+ }, props), /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], (0, _extends2["default"])({}, graphViewProps, {
274
274
  createHtTopoProps: (0, _extends2["default"])({}, graphViewProps.createHtTopoProps, {
275
275
  editor: (0, _extends2["default"])({}, ((_graphViewProps$creat = graphViewProps.createHtTopoProps) === null || _graphViewProps$creat === void 0 ? void 0 : _graphViewProps$creat.editor) || {})
276
276
  }),
@@ -16,32 +16,32 @@ var _ImagePanel = _interopRequireDefault(require("./views/ImagePanel"));
16
16
  var _LinkPanel = _interopRequireDefault(require("./views/LinkPanel"));
17
17
 
18
18
  var panes = [{
19
- key: '1',
19
+ key: 'link',
20
20
  title: '链路',
21
21
  titleTootip: '在两个节点之间添加链路&线',
22
22
  icon: '/img/topo/editor/sidebar/icon/链路.svg',
23
23
  content: _LinkPanel["default"]
24
24
  }, {
25
25
  title: '组件',
26
- key: '2',
26
+ key: 'basicComponent',
27
27
  titleTootip: '基础组件',
28
28
  icon: '/img/topo/editor/sidebar/icon/组件.svg',
29
29
  content: _ComponentPanel["default"]
30
30
  }, {
31
31
  title: '图片',
32
- key: '3',
32
+ key: 'image',
33
33
  titleTootip: '图片素材',
34
34
  icon: '/img/topo/editor/sidebar/icon/图片.svg',
35
35
  content: _ImagePanel["default"]
36
36
  }, {
37
37
  title: '背景',
38
- key: '4',
38
+ key: 'background',
39
39
  titleTootip: '背景素材',
40
40
  icon: '/img/topo/editor/sidebar/icon/背景.svg',
41
41
  content: _BackgroundPanel["default"]
42
42
  }, {
43
43
  title: '画布',
44
- key: '5',
44
+ key: 'canvas',
45
45
  titleTootip: '拓扑图画布底图',
46
46
  icon: '/img/topo/editor/sidebar/icon/画布.svg',
47
47
  content: _CanvasPanel["default"]
@@ -59,8 +59,8 @@ function formatRgbaColor(color) {
59
59
  }
60
60
  /**
61
61
  * 格式化背景rgba颜色
62
- * @param {{background, opacity}} prevColor
63
- * @param {{background, opacity}} currentColor
62
+ * @param {{background, opacity}} prevColor 原值
63
+ * @param {{background, opacity}} currentColor 新值
64
64
  */
65
65
 
66
66
 
@@ -21,7 +21,7 @@ function getTextStyle(element) {
21
21
  }, _fontStyleUtil["default"].toMap(element.a('rectFont')), (0, _colorUtil.parseBackground)(element.a('topLeftColor')));
22
22
  }
23
23
 
24
- function setTextStyle(element, style) {
24
+ function setTextStyle(element, style, topo) {
25
25
  if ('underline' in style) {}
26
26
 
27
27
  if ('color' in style) {
@@ -36,6 +36,7 @@ function setTextStyle(element, style) {
36
36
  var fontStr = _fontStyleUtil["default"].build(fontStyle);
37
37
 
38
38
  element.a('rectFont', fontStr);
39
+ topo.getHtTopo().setRectangleText(element);
39
40
  }
40
41
 
41
42
  var _default = {
@@ -26,8 +26,11 @@ var fieldDisabled = {
26
26
  function GlobalTagStyleSetting(props) {
27
27
  var topo = props.topo;
28
28
  var Component = props.Component,
29
- widgetProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
30
- var values = (0, _globalTag.useValues)(topo);
29
+ widgetProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded); // const values = useValues(topo)
30
+
31
+ var values = (0, _react.useMemo)(function () {
32
+ return {};
33
+ }, []);
31
34
  var setStyle = (0, _react.useMemo)(function () {
32
35
  return function (style) {
33
36
  return (0, _globalTag.setGlobalTagStyle)(topo, style);
@@ -11,7 +11,7 @@ var baseLightTheme = {
11
11
  color: '#FFFFFF',
12
12
  globalNodeLabelColor: '#4d6277',
13
13
  globalEdgeTagStyle: {
14
- color: '#CBCBCB',
14
+ color: '#777B9A',
15
15
  background: '#FFFFFF',
16
16
  // 背景色,不传使用默认内置 @V1.2
17
17
  borderColor: '#CBCBCB' // 边框颜色,不传使用默认内置。用于主题切换 @V1.2
@@ -26,7 +26,7 @@ var baseLightTheme = {
26
26
  // 标题背景颜色
27
27
  'group.title.color': '#4D6277',
28
28
  // 标题文字颜色
29
- 'group.background': 'rgba(76, 137, 255, 0.1)',
29
+ 'group.background': 'rgba(255, 255, 255, 0.9)',
30
30
  'group.border.color': '#E4E9EE' // 边框颜色
31
31
 
32
32
  }
@@ -44,32 +44,25 @@ var themeMap = [{
44
44
 
45
45
  function useCanvasTheme(props) {
46
46
  var topo = props.topo,
47
- canvasTheme = props.canvasTheme; // 拓扑图是否加载
47
+ themeName = props.themeName; // 拓扑图是否加载
48
48
 
49
49
  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
50
50
  graphLoaded = _topo$store$useModelS.graphLoaded;
51
51
 
52
52
  (0, _react.useEffect)(function () {
53
53
  // 设置
54
- var themeConfig = themeMap[canvasTheme || 'white'];
54
+ var themeConfig = themeMap[themeName || 'white'];
55
55
 
56
56
  if (graphLoaded && themeConfig) {
57
- var _topo$historyManager2;
58
-
59
57
  try {
60
- var _topo$historyManager;
61
-
62
- (_topo$historyManager = topo.historyManager) === null || _topo$historyManager === void 0 ? void 0 : _topo$historyManager.setDisabled(true, '切换主题');
63
- topo.getHtTopo().setToolsTheme(themeConfig.toolsTheme);
64
- topo.getHtTopo().setTheme(canvasTheme);
58
+ topo.getHtTopo().setTheme(themeName);
59
+ topo.getHtTopo().setToolsTheme(themeName);
65
60
  } catch (error) {
66
61
  console.error('切换主题失败', error);
67
62
  }
68
-
69
- (_topo$historyManager2 = topo.historyManager) === null || _topo$historyManager2 === void 0 ? void 0 : _topo$historyManager2.setDisabled(false, '切换主题');
70
63
  }
71
- }, [canvasTheme, graphLoaded]);
64
+ }, [themeName, graphLoaded]);
72
65
  return {
73
- canvasColor: themeMap[canvasTheme].color
66
+ canvasColor: themeMap[themeName].color
74
67
  };
75
68
  }
@@ -54,7 +54,7 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
54
54
  var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
55
55
 
56
56
  // eslint-disable-next-line no-undef
57
- var version = typeof "6.0.0-alpha.60" === 'string' ? "6.0.0-alpha.60" : null;
57
+ var version = typeof "6.0.0-alpha.62" === 'string' ? "6.0.0-alpha.62" : null;
58
58
  console.info("\u62D3\u6251\u7248\u672C: " + version);
59
59
  /**
60
60
  * 拓扑显示和编辑
@@ -122,10 +122,8 @@ function _default(engine) {
122
122
 
123
123
  case 2:
124
124
  icons = _context2.sent;
125
- // 通知ht
126
- engine.view.topoClient.emitEvent('topo_shape_load', (0, _icon.getEditorIcons)(engine));
127
125
 
128
- case 4:
126
+ case 3:
129
127
  case "end":
130
128
  return _context2.stop();
131
129
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riil-frontend/component-topology",
3
- "version": "6.0.0-alpha.60",
3
+ "version": "6.0.0-alpha.62",
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@6.0.0-alpha.60/build/index.html",
119
+ "homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.62/build/index.html",
120
120
  "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
121
121
  }