@riil-frontend/component-topology 9.0.0-a.3 → 9.0.0-a.31
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/1.js +1 -1
- package/build/index.css +1 -1
- package/build/index.js +12 -12
- package/es/components/VerticalIconTab/VerticalIconTab.module.scss +11 -5
- package/es/core/components/TopoView/GraphViewPanel.js +17 -4
- package/es/core/components/TopoView/TopoView.module.scss +17 -3
- package/es/core/editor/components/BackgroundView/index.module.scss +3 -0
- package/es/core/editor/components/Sidebar/Sidebar.module.scss +7 -7
- package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +1 -1
- package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.module.scss +1 -0
- package/es/core/editor/components/Sidebar/views/ComponentPanel.js +1 -1
- package/es/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js +2 -1
- package/es/core/editor/components/Sidebar/views/LinkPanel.js +1 -1
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +21 -5
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss +5 -1
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +31 -12
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss +12 -2
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js +6 -0
- package/es/core/editor/components/Toolbar/widgets/FontSizeWidget.js +1 -1
- package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/groupTitle.js +1 -1
- package/es/core/editor/components/settings/core/updateElementProperty.js +6 -1
- package/es/core/editor/components/settings/propertyViews/group/DataTab/hoooks/useGroupRelateResource.js +4 -3
- package/es/core/editor/components/settings/propertyViews/node/data/BindIpInput.js +95 -0
- package/es/core/editor/components/settings/propertyViews/node/data/Data.js +46 -14
- package/es/core/editor/config/themes.js +53 -2
- package/es/core/event/topoEventListener.js +22 -0
- package/es/core/hooks/useAlarm.js +18 -12
- package/es/core/hooks/useCanvasTheme.js +12 -4
- package/es/core/hooks/useResourceConfig.js +2 -1
- package/es/core/hooks/useTopoEdit.js +113 -19
- package/es/core/hooks/useTopoEventListener.js +4 -18
- package/es/core/hooks/useTopoFullscreen.js +32 -0
- package/es/core/models/Alarm.js +4 -13
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/topoData.js +16 -9
- package/es/core/models/utils/linkUtils.js +52 -27
- package/es/core/store/models/topoConfig.js +51 -20
- package/es/core/test/Test.js +52 -0
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +11 -35
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js +14 -0
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +8 -6
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/hooks/useMetricPolling.js +28 -56
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js +57 -1
- package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useMetricModels.js +13 -52
- package/es/networkTopo/getTopoData.js +2 -1
- package/es/networkTopo/models/LinkDynamicStyleExecutor.js +5 -5
- package/es/networkTopo/services/link.js +1 -1
- package/es/networkTopo/services/topo/basic.js +27 -26
- package/es/networkTopo/services/topo/networkLink.js +45 -3
- package/es/networkTopo/utils/exitLinkUtil.js +262 -0
- package/es/utils/ResourceConfigUtil.js +5 -4
- package/es/utils/htElementDataUtil.js +1 -7
- package/es/utils/htElementUtils.js +21 -21
- package/lib/components/VerticalIconTab/VerticalIconTab.module.scss +11 -5
- package/lib/core/components/TopoView/GraphViewPanel.js +18 -3
- package/lib/core/components/TopoView/TopoView.module.scss +17 -3
- package/lib/core/editor/components/BackgroundView/index.module.scss +3 -0
- package/lib/core/editor/components/Sidebar/Sidebar.module.scss +7 -7
- package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js +1 -1
- package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.module.scss +1 -0
- package/lib/core/editor/components/Sidebar/views/ComponentPanel.js +1 -1
- package/lib/core/editor/components/Sidebar/views/ImagePanel/ImagePanel.js +2 -1
- package/lib/core/editor/components/Sidebar/views/LinkPanel.js +1 -1
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +21 -4
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss +5 -1
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +31 -12
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss +12 -2
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js +6 -0
- package/lib/core/editor/components/Toolbar/widgets/FontSizeWidget.js +1 -1
- package/lib/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/groupTitle.js +1 -1
- package/lib/core/editor/components/settings/core/updateElementProperty.js +6 -1
- package/lib/core/editor/components/settings/propertyViews/group/DataTab/hoooks/useGroupRelateResource.js +3 -3
- package/lib/core/editor/components/settings/propertyViews/node/data/BindIpInput.js +111 -0
- package/lib/core/editor/components/settings/propertyViews/node/data/Data.js +48 -14
- package/lib/core/editor/config/themes.js +53 -2
- package/lib/core/event/topoEventListener.js +27 -0
- package/lib/core/hooks/useAlarm.js +19 -12
- package/lib/core/hooks/useCanvasTheme.js +12 -4
- package/lib/core/hooks/useResourceConfig.js +2 -1
- package/lib/core/hooks/useTopoEdit.js +114 -18
- package/lib/core/hooks/useTopoEventListener.js +3 -17
- package/lib/core/hooks/useTopoFullscreen.js +42 -0
- package/lib/core/models/Alarm.js +5 -16
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/topoData.js +16 -9
- package/lib/core/models/utils/linkUtils.js +53 -26
- package/lib/core/store/models/topoConfig.js +56 -19
- package/lib/core/test/Test.js +52 -0
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js +10 -35
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js +14 -0
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopoCard.js +8 -6
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/hooks/useMetricPolling.js +28 -55
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js +58 -1
- package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/hooks/useMetricModels.js +13 -53
- package/lib/networkTopo/getTopoData.js +2 -1
- package/lib/networkTopo/models/LinkDynamicStyleExecutor.js +5 -5
- package/lib/networkTopo/services/topo/basic.js +28 -28
- package/lib/networkTopo/services/topo/networkLink.js +45 -3
- package/lib/networkTopo/utils/exitLinkUtil.js +274 -0
- package/lib/utils/ResourceConfigUtil.js +4 -4
- package/lib/utils/htElementDataUtil.js +0 -10
- package/lib/utils/htElementUtils.js +21 -21
- package/package.json +3 -3
@@ -2,8 +2,7 @@ import rlog from '@riil-frontend/component-topology-utils/es/rlog';
|
|
2
2
|
import sortBy from 'lodash/sortBy';
|
3
3
|
import { isExitLink } from "../core/models/utils/linkUtils";
|
4
4
|
import { isClusterHtElement } from "./clusterUtil";
|
5
|
-
import {
|
6
|
-
import { getEdges, getGroups, getLayers, getNodes } from "./htElementUtils";
|
5
|
+
import { getEdges, getGroupChildren, getGroups, getLayerChildren, getLayers, getNodes } from "./htElementUtils";
|
7
6
|
/**
|
8
7
|
* 从拓扑图解析出拓扑资源配置
|
9
8
|
*
|
@@ -104,7 +103,9 @@ function getLayerDatas(dataModel) {
|
|
104
103
|
name: layerElement.s('label'),
|
105
104
|
order: layerElement.a('order'),
|
106
105
|
resources: {
|
107
|
-
"static":
|
106
|
+
"static": getLayerChildren(layerElement).filter(function (item) {
|
107
|
+
return !!item.getTag();
|
108
|
+
}).map(function (node) {
|
108
109
|
return node.getTag();
|
109
110
|
})
|
110
111
|
}
|
@@ -133,7 +134,7 @@ function getGroupConfigByElement(groupElement) {
|
|
133
134
|
name: groupElement.a('name'),
|
134
135
|
order: groupElement.a('order'),
|
135
136
|
resources: {
|
136
|
-
"static":
|
137
|
+
"static": getGroupChildren(groupElement).filter(function (node) {
|
137
138
|
return !!node.getTag();
|
138
139
|
}).map(function (node) {
|
139
140
|
return node.getTag();
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { getEdges
|
1
|
+
import { getEdges } from "./htElementUtils";
|
2
2
|
import * as htElementUtils from "./htElementUtils";
|
3
3
|
export function isLayer(element) {
|
4
4
|
return element.className === 'ht.Grid';
|
@@ -21,12 +21,6 @@ export function isResourceElement(element) {
|
|
21
21
|
export function isResourceNodeElement(element) {
|
22
22
|
return (htElementUtils.isGroup(element) || htElementUtils.isNode(element)) && isResourceElement(element);
|
23
23
|
}
|
24
|
-
export function getGroupChildrenResourceElements(element) {
|
25
|
-
return getGroupChildren(element).filter(isResourceElement);
|
26
|
-
}
|
27
|
-
export function getLayerChildrenResourceElements(layerElement) {
|
28
|
-
return getLayerChildren(layerElement).filter(isResourceElement);
|
29
|
-
}
|
30
24
|
export var getAllEdgeResourceIds = function getAllEdgeResourceIds(dm) {
|
31
25
|
return getEdges(dm).filter(function (node) {
|
32
26
|
return !!node.getTag();
|
@@ -15,7 +15,7 @@ function getElementData(element) {
|
|
15
15
|
styleMap: element.getStyleMap()
|
16
16
|
};
|
17
17
|
|
18
|
-
if (className ===
|
18
|
+
if (className === "ht.Edge") {
|
19
19
|
return _extends({}, commonData);
|
20
20
|
}
|
21
21
|
|
@@ -27,7 +27,7 @@ function getElementData(element) {
|
|
27
27
|
export function isNode(element) {
|
28
28
|
// HT为了支持区域内无节点可展开增加了站位节点,因此 节点的layer等于container_blank的过滤掉就可以了
|
29
29
|
// eslint-disable-next-line no-underscore-dangle
|
30
|
-
return element instanceof ht.Node && !isLayer(element) && element._layer !==
|
30
|
+
return element instanceof ht.Node && !isLayer(element) && element._layer !== "container_blank";
|
31
31
|
}
|
32
32
|
export function isEdge(element) {
|
33
33
|
return element instanceof ht.Edge;
|
@@ -38,7 +38,7 @@ export function isValidEdge(element) {
|
|
38
38
|
}
|
39
39
|
|
40
40
|
if (!element.getSource() || !element.getTarget()) {
|
41
|
-
rlog.error(
|
41
|
+
rlog.error("isValidEdge 连线异常:源或目的为空", element);
|
42
42
|
return false;
|
43
43
|
}
|
44
44
|
|
@@ -51,7 +51,7 @@ export function isLayer(element) {
|
|
51
51
|
return element instanceof ht.Grid;
|
52
52
|
}
|
53
53
|
export function isText(element) {
|
54
|
-
return element instanceof ht.Text && element.a(
|
54
|
+
return element instanceof ht.Text && element.a("isText");
|
55
55
|
}
|
56
56
|
export function getElements(dataModel) {
|
57
57
|
// console.error(111, dataModel.getDatas().getArray())
|
@@ -72,7 +72,7 @@ export function getGroupDatas(dataModel) {
|
|
72
72
|
}
|
73
73
|
export function getGroupElementByTag(dataModel, tag) {
|
74
74
|
return dataModel.getDataByTag(tag) || dataModel.getDatas().toArray().filter(function (item) {
|
75
|
-
return item.a(
|
75
|
+
return item.a("tag") === tag;
|
76
76
|
})[0];
|
77
77
|
}
|
78
78
|
export function getGroupData(element) {
|
@@ -83,14 +83,14 @@ export function getGroupData(element) {
|
|
83
83
|
var parent = element.getParent();
|
84
84
|
var groupInfo = parent ? {
|
85
85
|
groupId: parent.getTag(),
|
86
|
-
groupTag: parent.a(
|
86
|
+
groupTag: parent.a("tag") // 父容器
|
87
87
|
|
88
88
|
} : {};
|
89
89
|
return _extends({
|
90
90
|
name: element.getStyleMap().label
|
91
91
|
}, element.getAttrObject(), {
|
92
92
|
id: element.getTag(),
|
93
|
-
tag: element.a(
|
93
|
+
tag: element.a("tag"),
|
94
94
|
image: element.getImage()
|
95
95
|
}, groupInfo);
|
96
96
|
}
|
@@ -104,7 +104,7 @@ export function getNodeData(element) {
|
|
104
104
|
var parent = element.getParent();
|
105
105
|
var groupInfo = parent ? {
|
106
106
|
groupId: parent.getTag(),
|
107
|
-
groupTag: parent.a(
|
107
|
+
groupTag: parent.a("tag") // 父容器
|
108
108
|
|
109
109
|
} : {};
|
110
110
|
return _extends({}, element.getAttrObject(), {
|
@@ -116,12 +116,12 @@ export function getEdges(dataModel) {
|
|
116
116
|
return getElements(dataModel).filter(isValidEdge);
|
117
117
|
}
|
118
118
|
export function isEdgeGroupExpanded(edge) {
|
119
|
-
return isEdge(edge) && edge.getEdgeGroup() && !!edge.s(
|
119
|
+
return isEdge(edge) && edge.getEdgeGroup() && !!edge.s("edge.expanded");
|
120
120
|
}
|
121
121
|
/**
|
122
122
|
* 是否连线组代理
|
123
|
-
* @param {*} edge
|
124
|
-
* @returns
|
123
|
+
* @param {*} edge
|
124
|
+
* @returns
|
125
125
|
*/
|
126
126
|
|
127
127
|
export function isEdgeGroupAgent(edge) {
|
@@ -129,9 +129,9 @@ export function isEdgeGroupAgent(edge) {
|
|
129
129
|
}
|
130
130
|
/**
|
131
131
|
* 获得两个节点间的连线列表
|
132
|
-
* @param {*} node1
|
133
|
-
* @param {*} node2
|
134
|
-
* @returns
|
132
|
+
* @param {*} node1
|
133
|
+
* @param {*} node2
|
134
|
+
* @returns
|
135
135
|
*/
|
136
136
|
|
137
137
|
export function getEdgesBetweenNodes(node1, node2) {
|
@@ -153,7 +153,7 @@ export function getEdgesBetweenNodes(node1, node2) {
|
|
153
153
|
}
|
154
154
|
/**
|
155
155
|
* 获得节点间的连线组,连线<=1时返回null
|
156
|
-
* @returns
|
156
|
+
* @returns
|
157
157
|
*/
|
158
158
|
|
159
159
|
export function getEdgeGroupByNodes(node1, node2) {
|
@@ -172,7 +172,7 @@ export function getEdgeGroupByNodes(node1, node2) {
|
|
172
172
|
}
|
173
173
|
/**
|
174
174
|
* 获得节点间的连线组,连线<=1时返回null
|
175
|
-
* @returns
|
175
|
+
* @returns
|
176
176
|
*/
|
177
177
|
|
178
178
|
export function getEdgeGroupByNodeTags(dataModel, nodeTag1, nodeTag2) {
|
@@ -180,7 +180,7 @@ export function getEdgeGroupByNodeTags(dataModel, nodeTag1, nodeTag2) {
|
|
180
180
|
var node2 = dataModel.getDataByTag(nodeTag2);
|
181
181
|
|
182
182
|
if (!node1 || !node2) {
|
183
|
-
console.warn(
|
183
|
+
console.warn("getEdgeGroupByNodes 未找到节点", {
|
184
184
|
node1: node1,
|
185
185
|
node2: node2,
|
186
186
|
nodeTag1: nodeTag1,
|
@@ -261,7 +261,7 @@ export function getGroupChildren(group) {
|
|
261
261
|
|
262
262
|
|
263
263
|
return group.getChildren().getArray().filter(function (node) {
|
264
|
-
return node._layer !==
|
264
|
+
return node._layer !== "container_blank";
|
265
265
|
});
|
266
266
|
}
|
267
267
|
/**
|
@@ -291,7 +291,7 @@ export function getGroupChildrenData(group) {
|
|
291
291
|
export function setElementRuntimeStyle(element, name, value) {
|
292
292
|
var _extends2;
|
293
293
|
|
294
|
-
var prevRuntimeStyle = element.a(
|
294
|
+
var prevRuntimeStyle = element.a("runtimeStyles") || {};
|
295
295
|
|
296
296
|
var runtimeStyle = _extends({}, prevRuntimeStyle, (_extends2 = {}, _extends2[name] = value, _extends2)); // if (prevRuntimeStyle[name] === undefined && value === undefined) {
|
297
297
|
// return
|
@@ -302,7 +302,7 @@ export function setElementRuntimeStyle(element, name, value) {
|
|
302
302
|
runtimeStyle[name] = undefined; // delete runtimeStyle[name]
|
303
303
|
}
|
304
304
|
|
305
|
-
element.a(
|
305
|
+
element.a("runtimeStyles", runtimeStyle);
|
306
306
|
}
|
307
307
|
/**
|
308
308
|
* 判断拓扑图是否存在元素
|
@@ -315,7 +315,7 @@ export function isExistedElement(htTopo, dataModel, data) {
|
|
315
315
|
|
316
316
|
|
317
317
|
var element = getElements(dataModel).find(function (item) {
|
318
|
-
return data.tag && item.a(
|
318
|
+
return data.tag && item.a("tag") === data.tag;
|
319
319
|
});
|
320
320
|
|
321
321
|
if (element) {
|
@@ -3,8 +3,8 @@
|
|
3
3
|
|
4
4
|
.tabs {
|
5
5
|
height: 100%;
|
6
|
-
|
7
|
-
}
|
6
|
+
display: flex;
|
7
|
+
}
|
8
8
|
|
9
9
|
// 导航
|
10
10
|
.nav {
|
@@ -49,17 +49,23 @@
|
|
49
49
|
|
50
50
|
// 标签页内容区
|
51
51
|
.content {
|
52
|
-
width: 260px;
|
52
|
+
// width: 260px;
|
53
53
|
height: 100%;
|
54
54
|
border-left: none !important;
|
55
|
-
border-right: 1px solid var(--tab-wrapped-border-line-color);
|
56
55
|
transition: width .1s linear;
|
56
|
+
overflow: initial !important;
|
57
57
|
|
58
58
|
:global {
|
59
59
|
.#{$css-prefix}tabs-tabpane {
|
60
|
-
|
60
|
+
position: absolute;
|
61
|
+
left: 0;
|
62
|
+
top: 0;
|
63
|
+
z-index: 1;
|
64
|
+
// width: 250px;
|
61
65
|
height: 100%;
|
62
66
|
overflow: auto;
|
67
|
+
background: #FFF;
|
68
|
+
border-right: 1px solid var(--tab-wrapped-border-line-color);
|
63
69
|
}
|
64
70
|
}
|
65
71
|
|
@@ -7,8 +7,12 @@ exports["default"] = GraphViewPanel;
|
|
7
7
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
9
9
|
|
10
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
11
|
+
|
10
12
|
var _useCanvasTheme2 = _interopRequireDefault(require("../../hooks/useCanvasTheme"));
|
11
13
|
|
14
|
+
var _useTopoFullscreen = _interopRequireDefault(require("../../hooks/useTopoFullscreen"));
|
15
|
+
|
12
16
|
var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
|
13
17
|
|
14
18
|
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); }
|
@@ -16,6 +20,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
16
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; }
|
17
21
|
|
18
22
|
function GraphViewPanel(props) {
|
23
|
+
var _classNames;
|
24
|
+
|
19
25
|
var topo = props.topo,
|
20
26
|
hideBackgroundColor = props.hideBackgroundColor;
|
21
27
|
var displayConfig = topo.store.useModelState('displayConfig');
|
@@ -26,8 +32,14 @@ function GraphViewPanel(props) {
|
|
26
32
|
themeName: themeName,
|
27
33
|
hideBackgroundColor: hideBackgroundColor
|
28
34
|
}),
|
29
|
-
canvasColor = _useCanvasTheme.canvasColor
|
35
|
+
canvasColor = _useCanvasTheme.canvasColor,
|
36
|
+
canvasbackgroundImage = _useCanvasTheme.canvasbackgroundImage;
|
30
37
|
|
38
|
+
var panelRef = (0, _react.useRef)();
|
39
|
+
(0, _useTopoFullscreen["default"])({
|
40
|
+
topo: topo,
|
41
|
+
panelRef: panelRef
|
42
|
+
});
|
31
43
|
(0, _react.useEffect)(function () {
|
32
44
|
// eslint-disable-next-line no-underscore-dangle
|
33
45
|
window._debugtopo = topo; // eslint-disable-next-line no-underscore-dangle
|
@@ -43,9 +55,12 @@ function GraphViewPanel(props) {
|
|
43
55
|
};
|
44
56
|
|
45
57
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
46
|
-
|
47
|
-
|
58
|
+
ref: panelRef,
|
59
|
+
className: (0, _classnames["default"])(_TopoViewModule["default"].viewPanel, (_classNames = {}, _classNames[_TopoViewModule["default"].backgroundImg] = !!canvasbackgroundImage, _classNames)),
|
60
|
+
style: canvasColor ? {
|
48
61
|
background: canvasColor
|
62
|
+
} : {
|
63
|
+
backgroundImage: "url(" + canvasbackgroundImage + ")"
|
49
64
|
},
|
50
65
|
onFocus: onFocus
|
51
66
|
}, props.children);
|
@@ -10,14 +10,28 @@
|
|
10
10
|
flex: 1;
|
11
11
|
overflow: hidden;
|
12
12
|
position: relative;
|
13
|
+
|
14
|
+
&.backgroundImg {
|
15
|
+
/* 背景图垂直、水平均居中 */
|
16
|
+
background-position: center center;
|
17
|
+
/* 背景图不平铺 */
|
18
|
+
background-repeat: no-repeat;
|
19
|
+
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
|
20
|
+
background-attachment: fixed;
|
21
|
+
/* 让背景图基于容器大小伸缩 */
|
22
|
+
background-size: cover;
|
23
|
+
/* 设置背景颜色,背景图加载过程中会显示背景色 */
|
24
|
+
// background-color: #464646;
|
25
|
+
}
|
13
26
|
}
|
14
27
|
|
15
28
|
// 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题
|
16
29
|
:global {
|
17
|
-
body
|
30
|
+
body>.ht-ui-view {
|
18
31
|
z-index: 10000;
|
19
32
|
}
|
20
|
-
|
33
|
+
|
34
|
+
body>div[ht="ht-view ht.ui.ContextMenu"] {
|
21
35
|
z-index: 1000;
|
22
36
|
}
|
23
|
-
}
|
37
|
+
}
|
@@ -1,19 +1,19 @@
|
|
1
1
|
.sidebar {
|
2
2
|
// border-right: 1px solid #E6E7EB;
|
3
3
|
position: relative;
|
4
|
-
width: 60px;
|
4
|
+
// width: 60px;
|
5
5
|
|
6
6
|
.tabsContainer {
|
7
|
-
position: absolute;
|
8
|
-
|
7
|
+
// position: absolute;
|
8
|
+
// left: 0;
|
9
|
+
// top: 0;
|
10
|
+
// z-index: 1;
|
11
|
+
// width: 60px;
|
9
12
|
height: 100%;
|
10
|
-
left: 0;
|
11
|
-
top: 0;
|
12
|
-
z-index: 1;
|
13
13
|
background: #FFF;
|
14
14
|
|
15
15
|
&.expanded {
|
16
|
-
width: 320px;
|
16
|
+
// width: 320px;
|
17
17
|
}
|
18
18
|
}
|
19
19
|
}
|
@@ -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) {
|
@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
exports.__esModule = true;
|
6
6
|
exports["default"] = void 0;
|
7
7
|
|
8
|
+
var _checkbox = _interopRequireDefault(require("@alifd/next/lib/checkbox"));
|
9
|
+
|
8
10
|
var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
|
9
11
|
|
10
12
|
var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
|
@@ -94,10 +96,12 @@ function getValuesByEdges(topo) {
|
|
94
96
|
})[0] || 'nil';
|
95
97
|
}
|
96
98
|
|
97
|
-
function getEdgesValues(edges) {
|
99
|
+
function getEdgesValues(edges, topo) {
|
98
100
|
var edgeValues = [];
|
101
|
+
var htTopo = topo.getHtTopo();
|
99
102
|
edges.forEach(function (edge) {
|
100
103
|
edgeValues.push({
|
104
|
+
baseAgreement: htTopo.getEdgeMultarc(edges),
|
101
105
|
lineButton: edge.s('edge.type'),
|
102
106
|
startPoint: getStartPoint(edge),
|
103
107
|
endPoint: getEndPoint(edge),
|
@@ -108,8 +112,9 @@ function getValuesByEdges(topo) {
|
|
108
112
|
}
|
109
113
|
|
110
114
|
var selectionEdges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
|
111
|
-
var edgeValues = getEdgesValues(selectionEdges);
|
115
|
+
var edgeValues = getEdgesValues(selectionEdges, topo);
|
112
116
|
var values = {
|
117
|
+
baseAgreement: false,
|
113
118
|
lineButton: undefined,
|
114
119
|
startPoint: undefined,
|
115
120
|
endPoint: undefined,
|
@@ -135,10 +140,18 @@ function EdgeType(props) {
|
|
135
140
|
selection = props.selection,
|
136
141
|
_onChange = props.onChange;
|
137
142
|
|
143
|
+
var _useState = (0, _react.useState)(false),
|
144
|
+
disable = _useState[0],
|
145
|
+
setDisabel = _useState[1];
|
146
|
+
|
138
147
|
var field = _field["default"].useField({
|
139
148
|
autoUnmount: false,
|
140
149
|
values: getValuesByEdges(topo),
|
141
150
|
onChange: function onChange(name, value) {
|
151
|
+
if (name == 'baseAgreement') {
|
152
|
+
setDisabel(value);
|
153
|
+
}
|
154
|
+
|
142
155
|
if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
|
143
156
|
_onChange(name, null);
|
144
157
|
} else {
|
@@ -157,8 +170,12 @@ function EdgeType(props) {
|
|
157
170
|
inline: true,
|
158
171
|
labelAlign: "top"
|
159
172
|
}, /*#__PURE__*/_react["default"].createElement(FormItem, null, /*#__PURE__*/_react["default"].createElement(_LineType["default"], {
|
160
|
-
name: "lineButton"
|
161
|
-
|
173
|
+
name: "lineButton",
|
174
|
+
disable: disable
|
175
|
+
})), /*#__PURE__*/_react["default"].createElement(FormItem, null, /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
|
176
|
+
name: "baseAgreement",
|
177
|
+
onChange: _onChange
|
178
|
+
}, "\u81EA\u52A8\u8C03\u6574")), /*#__PURE__*/_react["default"].createElement(FormItem, {
|
162
179
|
label: "\u8D77\u70B9"
|
163
180
|
}, /*#__PURE__*/_react["default"].createElement(_select["default"], {
|
164
181
|
name: "startPoint",
|
@@ -5,7 +5,6 @@
|
|
5
5
|
background: #FFFFFF;
|
6
6
|
border-radius: 4px;
|
7
7
|
margin-bottom: -7px;
|
8
|
-
|
9
8
|
:global {
|
10
9
|
.#{$css-prefix}form-item:first-child{
|
11
10
|
margin-top: 0;
|
@@ -15,6 +14,11 @@
|
|
15
14
|
margin-top: 7px;
|
16
15
|
margin-bottom: 7px;
|
17
16
|
}
|
17
|
+
.#{$css-prefix}form-item:nth-child(2){
|
18
|
+
display: block !important;
|
19
|
+
margin-top: 7px;
|
20
|
+
margin-bottom: 0px;
|
21
|
+
}
|
18
22
|
.#{$css-prefix}form.#{$css-prefix}inline .#{$css-prefix}form-item:not(:last-child) {
|
19
23
|
margin-right: 8px;
|
20
24
|
.#{$css-prefix}select-trigger {
|
@@ -36,29 +36,48 @@ var LINE_TYPE_OPTIONS = [{
|
|
36
36
|
value: 'ortho',
|
37
37
|
label: '双折线',
|
38
38
|
icon: 'topo_linear_icon_bilinear'
|
39
|
+
}, {
|
40
|
+
value: 'arc',
|
41
|
+
label: '单弧线',
|
42
|
+
icon: 'topo_linear_icon_arc_line'
|
39
43
|
}, {
|
40
44
|
value: 'doublearc',
|
41
45
|
label: '双弧线',
|
42
46
|
icon: 'topo_linear_icon_arcline'
|
47
|
+
}, {
|
48
|
+
value: 'points',
|
49
|
+
label: '自由线形',
|
50
|
+
icon: 'topo_linear_icon_pointsline'
|
43
51
|
}];
|
44
52
|
|
45
53
|
var LineType = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
46
54
|
var value = props.value,
|
47
|
-
onChange = props.onChange
|
55
|
+
onChange = props.onChange,
|
56
|
+
disable = props.disable;
|
48
57
|
|
49
58
|
function lineButton(item) {
|
50
|
-
|
59
|
+
if (disable) {
|
60
|
+
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
61
|
+
className: _LineTypeModule["default"].redioBtnDisable
|
62
|
+
}, /*#__PURE__*/_react["default"].createElement("img", {
|
63
|
+
src: "/img/topo/editor/lineType/" + item.icon + "_disable.svg",
|
64
|
+
alt: "",
|
65
|
+
className: _LineTypeModule["default"].iconImg
|
66
|
+
}));
|
67
|
+
} else {
|
68
|
+
var _classNames;
|
51
69
|
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
70
|
+
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
71
|
+
className: (0, _classnames["default"])(_LineTypeModule["default"].redioBtn, (_classNames = {}, _classNames[_LineTypeModule["default"].selected] = value === item.value, _classNames)),
|
72
|
+
onClick: function onClick() {
|
73
|
+
onChange(item.value);
|
74
|
+
}
|
75
|
+
}, /*#__PURE__*/_react["default"].createElement("img", {
|
76
|
+
src: "/img/topo/editor/lineType/" + item.icon + ".svg",
|
77
|
+
alt: "",
|
78
|
+
className: _LineTypeModule["default"].iconImg
|
79
|
+
}));
|
80
|
+
}
|
62
81
|
}
|
63
82
|
|
64
83
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
@@ -1,5 +1,15 @@
|
|
1
1
|
.lineType{
|
2
2
|
display:flex;
|
3
|
+
.redioBtnDisable {
|
4
|
+
width: 24px;
|
5
|
+
height: 24px;
|
6
|
+
border-radius: 4px;
|
7
|
+
border: none !important;
|
8
|
+
color: #4D6277;
|
9
|
+
padding: 0;
|
10
|
+
margin-right: 10px;
|
11
|
+
text-align: center;
|
12
|
+
}
|
3
13
|
.redioBtn {
|
4
14
|
width: 24px;
|
5
15
|
height: 24px;
|
@@ -7,9 +17,9 @@
|
|
7
17
|
border: none !important;
|
8
18
|
color: #4D6277;
|
9
19
|
padding: 0;
|
10
|
-
margin-right:
|
20
|
+
margin-right: 10px;
|
11
21
|
text-align: center;
|
12
|
-
|
22
|
+
|
13
23
|
.iconImg {
|
14
24
|
vertical-align: middle;
|
15
25
|
}
|
@@ -68,6 +68,12 @@ function EdgeTypeButton(props) {
|
|
68
68
|
return;
|
69
69
|
}
|
70
70
|
|
71
|
+
if (name == 'baseAgreement') {
|
72
|
+
/** TODO: 自动调整api调用*/
|
73
|
+
htTopo.setEdgeMultarc(edges, value);
|
74
|
+
return;
|
75
|
+
}
|
76
|
+
|
71
77
|
(0, _edgeTypeStyleUtil.setEdgesAndChildren)(topo, edges, function (edge) {
|
72
78
|
if (name === 'startPoint') {
|
73
79
|
// 删除设置
|
@@ -33,7 +33,7 @@ function getTextStyle(element) {
|
|
33
33
|
color: (0, _colorUtil.parseColor)(element.s('group.title.color')),
|
34
34
|
underline: underline
|
35
35
|
}, _fontStyleUtil["default"].toMap(element.s('group.title.font')), {
|
36
|
-
fontSize: font.fontSize ||
|
36
|
+
fontSize: font.fontSize || ((0, _clusterUtil.isClusterHtElement)(element) ? 20 : 24),
|
37
37
|
fontFamily: font.fontFamily || '微软雅黑'
|
38
38
|
}, (0, _colorUtil.parseBackground)(element.s('group.title.background')));
|
39
39
|
}
|
@@ -5,7 +5,12 @@ exports["default"] = updateElementProperty;
|
|
5
5
|
|
6
6
|
function updateElementProperty(topo, name, value) {
|
7
7
|
// const element = topo.getDataModel().getDataById(selection[0].id);
|
8
|
-
var element = topo.getSelectionModel().getFirstData();
|
8
|
+
var element = topo.getSelectionModel().getFirstData();
|
9
|
+
console.info("updateElementProperty", topo.getSelectionModel().getSelection(), {
|
10
|
+
element: element,
|
11
|
+
name: name,
|
12
|
+
value: value
|
13
|
+
});
|
9
14
|
|
10
15
|
if (name.startsWith('attrObject.')) {
|
11
16
|
element.setAttr(name.replace('attrObject.', ''), value);
|