@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.
- package/build/index.js +1 -1
- package/es/core/components/TopoView/GraphViewPanel.js +5 -4
- package/es/core/components/TopoView/topoView.js +2 -2
- package/es/core/editor/components/Sidebar/panes.js +5 -5
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js +2 -2
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/box.js +2 -1
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js +5 -2
- package/es/core/editor/config/themes.js +2 -2
- package/es/core/hooks/useCanvasTheme.js +6 -13
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/store/models/customIcon.js +1 -3
- package/lib/core/components/TopoView/GraphViewPanel.js +5 -4
- package/lib/core/components/TopoView/topoView.js +2 -2
- package/lib/core/editor/components/Sidebar/panes.js +5 -5
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js +2 -2
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/box.js +2 -1
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/GlobalTagStyleSetting/GlobalTagStyleSetting.js +5 -2
- package/lib/core/editor/config/themes.js +2 -2
- package/lib/core/hooks/useCanvasTheme.js +6 -13
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/store/models/customIcon.js +1 -3
- 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
|
8
|
+
var themeName = displayConfig.canvasTheme || 'white';
|
8
9
|
|
9
10
|
var _useCanvasTheme = useCanvasTheme({
|
10
11
|
topo: topo,
|
11
|
-
|
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: '
|
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: '
|
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: '
|
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: '
|
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: '
|
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
|
-
|
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: '#
|
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(
|
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
|
-
|
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[
|
40
|
+
var themeConfig = themeMap[themeName || 'white'];
|
41
41
|
|
42
42
|
if (graphLoaded && themeConfig) {
|
43
|
-
var _topo$historyManager2;
|
44
|
-
|
45
43
|
try {
|
46
|
-
|
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
|
-
}, [
|
50
|
+
}, [themeName, graphLoaded]);
|
58
51
|
return {
|
59
|
-
canvasColor: themeMap[
|
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.
|
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
|
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
|
18
|
+
var themeName = displayConfig.canvasTheme || 'white';
|
18
19
|
|
19
20
|
var _useCanvasTheme = (0, _useCanvasTheme2["default"])({
|
20
21
|
topo: topo,
|
21
|
-
|
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: '
|
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: '
|
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: '
|
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: '
|
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: '
|
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
|
-
|
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: '#
|
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(
|
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
|
-
|
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[
|
54
|
+
var themeConfig = themeMap[themeName || 'white'];
|
55
55
|
|
56
56
|
if (graphLoaded && themeConfig) {
|
57
|
-
var _topo$historyManager2;
|
58
|
-
|
59
57
|
try {
|
60
|
-
|
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
|
-
}, [
|
64
|
+
}, [themeName, graphLoaded]);
|
72
65
|
return {
|
73
|
-
canvasColor: themeMap[
|
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.
|
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
|
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.
|
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.
|
119
|
+
"homepage": "https://unpkg.com/@riil-frontend/component-topology@6.0.0-alpha.62/build/index.html",
|
120
120
|
"gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
|
121
121
|
}
|