@riil-frontend/component-topology 6.0.0-alpha.4 → 6.0.0-alpha.6
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 +2 -2
- package/build/2.js +1 -1
- package/build/index.css +1 -1
- package/build/index.js +21 -21
- package/es/components/VerticalIconTab/VerticalIconTab.module.scss +5 -1
- package/es/core/editor/components/Sidebar/Sidebar.js +23 -50
- package/es/core/editor/components/Sidebar/panes.js +32 -0
- package/es/core/editor/components/Sidebar/views/CanvasPanel/{ImagePanel.js → CanvasPanel.js} +1 -1
- package/es/core/editor/components/Sidebar/views/CanvasPanel/index.js +1 -1
- package/es/core/editor/components/Sidebar/views/ImagePanel/HtCustomImagePanel.js +2 -5
- package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js +2 -4
- package/es/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss +5 -0
- package/es/core/editor/components/Toolbar/EditorToolbar.js +9 -6
- package/es/core/editor/components/Toolbar/Toolbar.js +1 -1
- package/es/core/editor/components/Toolbar/Toolbar.module.scss +14 -3
- package/es/core/editor/components/Toolbar/widgets/AddResourceButton.js +6 -5
- package/es/core/editor/components/Toolbar/widgets/CanvasMoveWidget.js +13 -2
- package/es/core/editor/components/Toolbar/widgets/CanvasSelectWidget.js +11 -2
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +133 -3
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss +46 -0
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +46 -0
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss +31 -0
- package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js +27 -6
- package/es/core/editor/components/Toolbar/widgets/HistoryRedoButton.js +2 -1
- package/es/core/editor/components/Toolbar/widgets/HistoryUndoButton.js +3 -2
- package/es/core/editor/components/Toolbar/widgets/NodeSizeButton/NodeSizeButton.js +2 -1
- package/es/core/editor/components/Toolbar/widgets/WidgetBox.js +7 -20
- package/es/core/editor/components/Toolbar/widgets/WidgetBox.module.scss +1 -0
- package/es/core/editor/components/Toolbar/widgets/components/ButtonBox.js +4 -2
- package/es/core/editor/components/Toolbar/widgets/components/DropdownButton.js +8 -5
- package/es/core/editor/components/settings/common/LineType/index.js +3 -19
- package/es/core/editor/components/settings/common/SizeInput/NodeSizeInput.js +3 -0
- package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementLineType.js +2 -37
- package/es/core/{store/models → editor/store}/background.js +0 -0
- package/es/core/{store/models → editor/store}/historyManager.js +0 -0
- package/es/core/{store/models → editor/store}/topoEdit.js +8 -1
- package/es/core/editor/utils/edgeTypeStyleUtil.js +73 -0
- package/es/core/hooks/useTopoEdit.js +21 -54
- package/es/core/models/TopoApp.js +1 -1
- package/es/core/models/TopoGraphView.js +8 -2
- package/es/core/store/coreModels.js +6 -7
- package/lib/components/VerticalIconTab/VerticalIconTab.module.scss +5 -1
- package/lib/core/editor/components/Sidebar/Sidebar.js +22 -53
- package/lib/core/editor/components/Sidebar/panes.js +45 -0
- package/lib/core/editor/components/Sidebar/views/CanvasPanel/{ImagePanel.js → CanvasPanel.js} +2 -2
- package/lib/core/editor/components/Sidebar/views/CanvasPanel/index.js +2 -2
- package/lib/core/editor/components/Sidebar/views/ImagePanel/HtCustomImagePanel.js +2 -5
- package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.js +3 -4
- package/lib/core/editor/components/Sidebar/views/ImagePanel/HtImagePalette.module.scss +5 -0
- package/lib/core/editor/components/Toolbar/EditorToolbar.js +10 -6
- package/lib/core/editor/components/Toolbar/Toolbar.js +1 -1
- package/lib/core/editor/components/Toolbar/Toolbar.module.scss +14 -3
- package/lib/core/editor/components/Toolbar/widgets/AddResourceButton.js +6 -5
- package/lib/core/editor/components/Toolbar/widgets/CanvasMoveWidget.js +13 -2
- package/lib/core/editor/components/Toolbar/widgets/CanvasSelectWidget.js +11 -2
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js +143 -3
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss +46 -0
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js +61 -0
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss +31 -0
- package/lib/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js +27 -5
- package/lib/core/editor/components/Toolbar/widgets/HistoryRedoButton.js +3 -1
- package/lib/core/editor/components/Toolbar/widgets/HistoryUndoButton.js +3 -1
- package/lib/core/editor/components/Toolbar/widgets/NodeSizeButton/NodeSizeButton.js +2 -1
- package/lib/core/editor/components/Toolbar/widgets/WidgetBox.js +9 -24
- package/lib/core/editor/components/Toolbar/widgets/WidgetBox.module.scss +1 -0
- package/lib/core/editor/components/Toolbar/widgets/components/ButtonBox.js +4 -2
- package/lib/core/editor/components/Toolbar/widgets/components/DropdownButton.js +8 -5
- package/lib/core/editor/components/settings/common/LineType/index.js +3 -18
- package/lib/core/editor/components/settings/common/SizeInput/NodeSizeInput.js +3 -0
- package/lib/core/editor/components/settings/propertyViews/multipleElements/MultipleElementLineType.js +2 -37
- package/lib/core/{store/models → editor/store}/background.js +0 -0
- package/lib/core/{store/models → editor/store}/historyManager.js +0 -0
- package/lib/core/{store/models → editor/store}/topoEdit.js +8 -1
- package/lib/core/editor/utils/edgeTypeStyleUtil.js +82 -0
- package/lib/core/hooks/useTopoEdit.js +21 -56
- package/lib/core/models/TopoApp.js +1 -1
- package/lib/core/models/TopoGraphView.js +8 -2
- package/lib/core/store/coreModels.js +5 -7
- package/package.json +2 -2
- package/es/core/store/models/topoView.js +0 -36
- package/lib/core/store/models/topoView.js +0 -47
@@ -0,0 +1,31 @@
|
|
1
|
+
.lineType{
|
2
|
+
display:flex;
|
3
|
+
.redioBtn {
|
4
|
+
width: 24px;
|
5
|
+
height: 24px;
|
6
|
+
border-radius: 4px;
|
7
|
+
border: none !important;
|
8
|
+
color: #4D6277;
|
9
|
+
padding: 0;
|
10
|
+
margin-right: 16px;
|
11
|
+
text-align: center;
|
12
|
+
|
13
|
+
.iconImg {
|
14
|
+
vertical-align: middle;
|
15
|
+
}
|
16
|
+
|
17
|
+
&:active {
|
18
|
+
background: #F2F7FD !important;
|
19
|
+
}
|
20
|
+
|
21
|
+
&:hover {
|
22
|
+
background: #F2F7FD !important;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
.redioBtn:last-child{
|
26
|
+
margin-right: 0;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
.iconImg {
|
30
|
+
vertical-align: middle;
|
31
|
+
}
|
@@ -9,6 +9,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
|
|
9
9
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
11
11
|
|
12
|
+
var _edgeTypeStyleUtil = require("../../../../utils/edgeTypeStyleUtil");
|
13
|
+
|
12
14
|
var _DropdownButton = _interopRequireDefault(require("../components/DropdownButton"));
|
13
15
|
|
14
16
|
var _WidgetBox = _interopRequireDefault(require("../WidgetBox"));
|
@@ -31,15 +33,32 @@ function EdgeTypeButton(props) {
|
|
31
33
|
showLabel = props.showLabel,
|
32
34
|
otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
|
33
35
|
|
34
|
-
var _useState = (0, _react.useState)(
|
36
|
+
var _useState = (0, _react.useState)(false),
|
35
37
|
disabled = _useState[0],
|
36
|
-
setDisabled = _useState[1]; //
|
38
|
+
setDisabled = _useState[1]; // 拓扑图是否加载
|
39
|
+
|
40
|
+
|
41
|
+
var _topo$store$useModelS = topo.store.useModelState('topoMod'),
|
42
|
+
graphLoaded = _topo$store$useModelS.graphLoaded; // 选中的元素
|
37
43
|
|
38
44
|
|
39
45
|
var selection = topo.selectionManager.useSelection();
|
40
46
|
(0, _react.useEffect)(function () {
|
41
|
-
|
42
|
-
|
47
|
+
if (graphLoaded) {
|
48
|
+
var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
|
49
|
+
console.info('xxxx', edges, selection);
|
50
|
+
setDisabled(!edges.length);
|
51
|
+
}
|
52
|
+
}, [selection, graphLoaded]);
|
53
|
+
|
54
|
+
var handleChange = function handleChange(name, value) {
|
55
|
+
var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
|
56
|
+
|
57
|
+
if (name === 'lineButton') {
|
58
|
+
(0, _edgeTypeStyleUtil.setEdgesType)(edges, value, topo);
|
59
|
+
}
|
60
|
+
};
|
61
|
+
|
43
62
|
var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
|
44
63
|
src: "/img/topo/editor/toolbar/\u7EBF\u5F62/Disable.svg",
|
45
64
|
alt: ""
|
@@ -50,11 +69,14 @@ function EdgeTypeButton(props) {
|
|
50
69
|
return /*#__PURE__*/_react["default"].createElement(_WidgetBox["default"], {
|
51
70
|
label: "\u7EBF\u5F62",
|
52
71
|
tooltip: "\u7EBF\u5F62",
|
72
|
+
disabled: disabled,
|
53
73
|
showLabel: showLabel
|
54
74
|
}, /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {
|
55
75
|
disabled: disabled,
|
56
76
|
trigger: icon
|
57
|
-
}, /*#__PURE__*/_react["default"].createElement(_EdgeType["default"],
|
77
|
+
}, /*#__PURE__*/_react["default"].createElement(_EdgeType["default"], {
|
78
|
+
onChange: handleChange
|
79
|
+
})));
|
58
80
|
}
|
59
81
|
|
60
82
|
var _default = EdgeTypeButton;
|
@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
10
10
|
var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
|
11
11
|
|
12
|
+
var _ButtonBox = _interopRequireDefault(require("./components/ButtonBox"));
|
13
|
+
|
12
14
|
function HistoryRedoButton(props) {
|
13
15
|
var topo = props.topo,
|
14
16
|
showLabel = props.showLabel;
|
@@ -21,7 +23,7 @@ function HistoryRedoButton(props) {
|
|
21
23
|
label: "\u6062\u590D",
|
22
24
|
tooltip: "\u6062\u590D",
|
23
25
|
showLabel: showLabel
|
24
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
26
|
+
}, /*#__PURE__*/_react["default"].createElement(_ButtonBox["default"], null, /*#__PURE__*/_react["default"].createElement("img", {
|
25
27
|
src: "/img/topo/editor/toolbar/redo/" + (disabled ? 'Disable' : 'Normal') + ".svg",
|
26
28
|
alt: ""
|
27
29
|
})));
|
@@ -7,6 +7,8 @@ exports["default"] = void 0;
|
|
7
7
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
|
10
|
+
var _ButtonBox = _interopRequireDefault(require("./components/ButtonBox"));
|
11
|
+
|
10
12
|
var _WidgetBox = _interopRequireDefault(require("./WidgetBox"));
|
11
13
|
|
12
14
|
// import { Icon, Button } from '@alifd/next';
|
@@ -23,7 +25,7 @@ function HistoryUndoButton(props) {
|
|
23
25
|
label: "\u64A4\u9500",
|
24
26
|
tooltip: "\u64A4\u9500",
|
25
27
|
showLabel: showLabel
|
26
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
28
|
+
}, /*#__PURE__*/_react["default"].createElement(_ButtonBox["default"], {
|
27
29
|
disabled: disabled,
|
28
30
|
onClick: function onClick() {
|
29
31
|
topo.historyManager.undo();
|
@@ -5,19 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
exports.__esModule = true;
|
6
6
|
exports["default"] = void 0;
|
7
7
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
|
-
|
10
|
-
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
11
|
-
|
12
8
|
var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
|
13
9
|
|
14
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
15
|
-
|
16
10
|
var _react = _interopRequireDefault(require("react"));
|
17
11
|
|
18
|
-
var
|
12
|
+
var _ButtonBox = _interopRequireDefault(require("./components/ButtonBox"));
|
19
13
|
|
20
|
-
var
|
14
|
+
var _WidgetBoxModule = _interopRequireDefault(require("./WidgetBox.module.scss"));
|
21
15
|
|
22
16
|
function WidgetBox(props) {
|
23
17
|
var label = props.label,
|
@@ -26,9 +20,8 @@ function WidgetBox(props) {
|
|
26
20
|
disabled = props.disabled,
|
27
21
|
children = props.children;
|
28
22
|
|
29
|
-
var button = /*#__PURE__*/_react["default"].createElement("
|
23
|
+
var button = /*#__PURE__*/_react["default"].createElement("div", {
|
30
24
|
disabled: disabled,
|
31
|
-
type: "button",
|
32
25
|
className: _WidgetBoxModule["default"].container
|
33
26
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
34
27
|
className: _WidgetBoxModule["default"].content
|
@@ -42,22 +35,14 @@ function WidgetBox(props) {
|
|
42
35
|
|
43
36
|
return /*#__PURE__*/_react["default"].createElement(_balloon["default"].Tooltip, {
|
44
37
|
trigger: button,
|
45
|
-
align: "b"
|
38
|
+
align: "b" // 解决遮挡下拉浮层问题
|
39
|
+
,
|
40
|
+
popupStyle: {
|
41
|
+
zIndex: 1000
|
42
|
+
}
|
46
43
|
}, tooltip);
|
47
44
|
}
|
48
45
|
|
49
|
-
|
50
|
-
var _classNames;
|
51
|
-
|
52
|
-
var active = props.active,
|
53
|
-
disabled = props.disabled,
|
54
|
-
children = props.children,
|
55
|
-
otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
|
56
|
-
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
|
57
|
-
className: (0, _classnames["default"])(_WidgetBoxModule["default"].ButtonBox, (_classNames = {}, _classNames[_WidgetBoxModule["default"].ButtonBoxActive] = active, _classNames[_WidgetBoxModule["default"].ButtonBoxDisabled] = disabled, _classNames))
|
58
|
-
}, otherProps), children);
|
59
|
-
}
|
60
|
-
|
61
|
-
WidgetBox.ButtonBox = ButtonBox;
|
46
|
+
WidgetBox.ButtonBox = _ButtonBox["default"];
|
62
47
|
var _default = WidgetBox;
|
63
48
|
exports["default"] = _default;
|
@@ -19,7 +19,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
19
|
|
20
20
|
var _ButtonBoxModule = _interopRequireDefault(require("./ButtonBox.module.scss"));
|
21
21
|
|
22
|
-
var _excluded = ["active", "disabled", "showArrow", "children"];
|
22
|
+
var _excluded = ["active", "disabled", "showArrow", "children", "onClick"];
|
23
23
|
|
24
24
|
function ButtonBox(props) {
|
25
25
|
var _classNames, _classNames2;
|
@@ -28,9 +28,11 @@ function ButtonBox(props) {
|
|
28
28
|
disabled = props.disabled,
|
29
29
|
showArrow = props.showArrow,
|
30
30
|
children = props.children,
|
31
|
+
onClick = props.onClick,
|
31
32
|
otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
|
32
33
|
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
|
33
|
-
className: (0, _classnames["default"])(_ButtonBoxModule["default"].ButtonBox, (_classNames = {}, _classNames[_ButtonBoxModule["default"].ButtonBoxActive] = active, _classNames[_ButtonBoxModule["default"].ButtonBoxDisabled] = disabled, _classNames))
|
34
|
+
className: (0, _classnames["default"])(_ButtonBoxModule["default"].ButtonBox, (_classNames = {}, _classNames[_ButtonBoxModule["default"].ButtonBoxActive] = active, _classNames[_ButtonBoxModule["default"].ButtonBoxDisabled] = disabled, _classNames)),
|
35
|
+
onClick: disabled ? undefined : onClick
|
34
36
|
}, otherProps), children, showArrow && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "\xA0", /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
35
37
|
type: "tree_fold_arrow",
|
36
38
|
size: "xxs",
|
@@ -21,6 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
21
21
|
|
22
22
|
function DropdownButton(props) {
|
23
23
|
var trigger = props.trigger,
|
24
|
+
disabled = props.disabled,
|
24
25
|
_props$showArrow = props.showArrow,
|
25
26
|
showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
|
26
27
|
_props$showContainer = props.showContainer,
|
@@ -28,19 +29,21 @@ function DropdownButton(props) {
|
|
28
29
|
children = props.children;
|
29
30
|
|
30
31
|
var _useState = (0, _react.useState)(false),
|
31
|
-
|
32
|
-
|
32
|
+
active = _useState[0],
|
33
|
+
setActive = _useState[1];
|
33
34
|
|
34
35
|
var button = /*#__PURE__*/_react["default"].createElement(_ButtonBox["default"], {
|
35
|
-
active:
|
36
|
+
active: active,
|
37
|
+
disabled: disabled,
|
36
38
|
showArrow: showArrow
|
37
39
|
}, trigger);
|
38
40
|
|
39
41
|
return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
|
40
|
-
visible:
|
42
|
+
visible: active,
|
43
|
+
disabled: disabled,
|
41
44
|
trigger: button,
|
42
45
|
triggerType: "click",
|
43
|
-
onVisibleChange:
|
46
|
+
onVisibleChange: setActive
|
44
47
|
}, !showContainer ? children : /*#__PURE__*/_react["default"].createElement(PopupCard, null, children));
|
45
48
|
}
|
46
49
|
|
@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
|
14
14
|
var _LineTypeModule = _interopRequireDefault(require("./LineType.module.scss"));
|
15
15
|
|
16
|
+
var _edgeTypeStyleUtil = require("../../../../utils/edgeTypeStyleUtil");
|
17
|
+
|
16
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); }
|
17
19
|
|
18
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; }
|
@@ -81,24 +83,7 @@ var LineType = function LineType(props) {
|
|
81
83
|
|
82
84
|
var setLineType = function setLineType(type) {
|
83
85
|
var edges = getEdges();
|
84
|
-
|
85
|
-
edges.forEach(function (edge) {
|
86
|
-
htTopo.setGraphLinear(edge, {
|
87
|
-
type: type
|
88
|
-
});
|
89
|
-
|
90
|
-
if (edge.isEdgeGroupAgent()) {
|
91
|
-
// 连线组折叠时同时设置子连线
|
92
|
-
var edgeChildren = edge.getEdgeGroup().getEdges().toArray();
|
93
|
-
htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), true);
|
94
|
-
edgeChildren.forEach(function (edgeChild) {
|
95
|
-
htTopo.setGraphLinear(edgeChild, {
|
96
|
-
type: type
|
97
|
-
});
|
98
|
-
});
|
99
|
-
htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), false);
|
100
|
-
}
|
101
|
-
});
|
86
|
+
(0, _edgeTypeStyleUtil.setEdgesType)(edges, type, topo);
|
102
87
|
};
|
103
88
|
|
104
89
|
var handleChange = function handleChange(data) {
|
@@ -46,6 +46,7 @@ function SizeInput(props) {
|
|
46
46
|
onLockChange = props.onLockChange,
|
47
47
|
_props$showLabel = props.showLabel,
|
48
48
|
showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
|
49
|
+
hasTrigger = props.hasTrigger,
|
49
50
|
size = props.size;
|
50
51
|
|
51
52
|
var handleChange = function handleChange(name, attrValue) {
|
@@ -92,6 +93,7 @@ function SizeInput(props) {
|
|
92
93
|
step: step,
|
93
94
|
placeholder: "\u8BF7\u8F93\u5165",
|
94
95
|
size: size,
|
96
|
+
hasTrigger: hasTrigger,
|
95
97
|
style: {
|
96
98
|
width: '100%'
|
97
99
|
},
|
@@ -123,6 +125,7 @@ function SizeInput(props) {
|
|
123
125
|
step: step,
|
124
126
|
placeholder: "\u8BF7\u8F93\u5165",
|
125
127
|
size: size,
|
128
|
+
hasTrigger: hasTrigger,
|
126
129
|
style: {
|
127
130
|
width: '100%'
|
128
131
|
},
|
@@ -7,7 +7,7 @@ exports["default"] = MultipleElementLineType;
|
|
7
7
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
|
10
|
-
var
|
10
|
+
var _edgeTypeStyleUtil = require("../../../../utils/edgeTypeStyleUtil");
|
11
11
|
|
12
12
|
var _LineType = _interopRequireDefault(require("../../common/LineType"));
|
13
13
|
|
@@ -16,43 +16,8 @@ function MultipleElementLineType(props) {
|
|
16
16
|
|
17
17
|
var setLineType = function setLineType(type) {};
|
18
18
|
|
19
|
-
var getChildrenNodeIds = function getChildrenNodeIds(nodes) {
|
20
|
-
var nodeIds = nodes.map(function (node) {
|
21
|
-
return node.getId();
|
22
|
-
});
|
23
|
-
nodes.forEach(function (node) {
|
24
|
-
if (node instanceof ht.Group) {
|
25
|
-
var children = node.getChildren().toArray();
|
26
|
-
nodeIds.push.apply(nodeIds, getChildrenNodeIds(children));
|
27
|
-
}
|
28
|
-
});
|
29
|
-
return nodeIds;
|
30
|
-
};
|
31
|
-
|
32
19
|
var getSelectedEdges = function getSelectedEdges() {
|
33
|
-
|
34
|
-
var selection = gv.getSelectionModel().getSelection().toArray();
|
35
|
-
var edges = selection.filter(function (element) {
|
36
|
-
return element instanceof ht.Edge;
|
37
|
-
}); // 查询选中节点间的连线
|
38
|
-
|
39
|
-
var nodes = selection.filter(function (element) {
|
40
|
-
return element instanceof ht.Node;
|
41
|
-
});
|
42
|
-
var nodeIds = getChildrenNodeIds(nodes);
|
43
|
-
var dm = gv.getDataModel();
|
44
|
-
(0, _htElementUtils.getEdges)(dm).forEach(function (edge) {
|
45
|
-
if (nodeIds.find(function (nodeId) {
|
46
|
-
return nodeId === edge.getSource().getId();
|
47
|
-
}) && nodeIds.find(function (nodeId) {
|
48
|
-
return nodeId === edge.getTarget().getId();
|
49
|
-
}) && !edges.find(function (item) {
|
50
|
-
return item === edge;
|
51
|
-
})) {
|
52
|
-
edges.push(edge);
|
53
|
-
}
|
54
|
-
});
|
55
|
-
return edges;
|
20
|
+
return (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
|
56
21
|
};
|
57
22
|
|
58
23
|
return /*#__PURE__*/_react["default"].createElement(_LineType["default"], {
|
File without changes
|
File without changes
|
@@ -21,7 +21,14 @@ var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-co
|
|
21
21
|
var _default = {
|
22
22
|
// 定义 model 的初始 state
|
23
23
|
state: {
|
24
|
-
|
24
|
+
// 是否就绪
|
25
|
+
ready: false,
|
26
|
+
// 保存状态
|
27
|
+
saving: false,
|
28
|
+
// 选择/拖动模式模式。默认选择模式 select|move
|
29
|
+
viewMouseMode: 'select',
|
30
|
+
// 资源面板展开项
|
31
|
+
resourceTabactiveKey: null
|
25
32
|
},
|
26
33
|
// 定义改变该模型状态的纯函数
|
27
34
|
reducers: {
|
@@ -0,0 +1,82 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
exports.__esModule = true;
|
4
|
+
exports.getEdgesBySelection = getEdgesBySelection;
|
5
|
+
exports.setEdgesType = setEdgesType;
|
6
|
+
|
7
|
+
var _htElementUtils = require("../../../utils/htElementUtils");
|
8
|
+
|
9
|
+
var ht = window.ht;
|
10
|
+
|
11
|
+
function getEdgesBySelection(topo) {
|
12
|
+
var getChildrenNodeIds = function getChildrenNodeIds(nodes) {
|
13
|
+
var nodeIds = nodes.map(function (node) {
|
14
|
+
return node.getId();
|
15
|
+
});
|
16
|
+
nodes.forEach(function (node) {
|
17
|
+
if (node instanceof ht.Group) {
|
18
|
+
var children = node.getChildren().toArray();
|
19
|
+
nodeIds.push.apply(nodeIds, getChildrenNodeIds(children));
|
20
|
+
}
|
21
|
+
});
|
22
|
+
return nodeIds;
|
23
|
+
};
|
24
|
+
|
25
|
+
var getSelectedEdges = function getSelectedEdges(topo) {
|
26
|
+
var gv = topo.getGraphView();
|
27
|
+
var selection = gv.getSelectionModel().getSelection().toArray(); // 选中的连线
|
28
|
+
|
29
|
+
var edges = selection.filter(function (element) {
|
30
|
+
return element instanceof ht.Edge;
|
31
|
+
}); // 查询选中节点间的连线
|
32
|
+
|
33
|
+
var nodes = selection.filter(function (element) {
|
34
|
+
return element instanceof ht.Node;
|
35
|
+
});
|
36
|
+
var nodeIds = getChildrenNodeIds(nodes);
|
37
|
+
var dm = gv.getDataModel();
|
38
|
+
(0, _htElementUtils.getEdges)(dm).forEach(function (edge) {
|
39
|
+
if (nodeIds.find(function (nodeId) {
|
40
|
+
return nodeId === edge.getSource().getId();
|
41
|
+
}) && nodeIds.find(function (nodeId) {
|
42
|
+
return nodeId === edge.getTarget().getId();
|
43
|
+
}) && !edges.find(function (item) {
|
44
|
+
return item === edge;
|
45
|
+
})) {
|
46
|
+
edges.push(edge);
|
47
|
+
}
|
48
|
+
});
|
49
|
+
return edges;
|
50
|
+
};
|
51
|
+
|
52
|
+
return getSelectedEdges(topo);
|
53
|
+
}
|
54
|
+
/**
|
55
|
+
* 批量设置连线线形
|
56
|
+
*
|
57
|
+
* @param {*} edges
|
58
|
+
* @param {*} type
|
59
|
+
* @param {*} topo
|
60
|
+
*/
|
61
|
+
|
62
|
+
|
63
|
+
function setEdgesType(edges, type, topo) {
|
64
|
+
var htTopo = topo.getHtTopo();
|
65
|
+
edges.forEach(function (edge) {
|
66
|
+
htTopo.setGraphLinear(edge, {
|
67
|
+
type: type
|
68
|
+
});
|
69
|
+
|
70
|
+
if (edge.isEdgeGroupAgent()) {
|
71
|
+
// 连线组折叠时同时设置子连线
|
72
|
+
var edgeChildren = edge.getEdgeGroup().getEdges().toArray();
|
73
|
+
htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), true);
|
74
|
+
edgeChildren.forEach(function (edgeChild) {
|
75
|
+
htTopo.setGraphLinear(edgeChild, {
|
76
|
+
type: type
|
77
|
+
});
|
78
|
+
});
|
79
|
+
htTopo.toggleEdgeGroup(edge.getSource(), edge.getTarget(), false);
|
80
|
+
}
|
81
|
+
});
|
82
|
+
}
|
@@ -65,8 +65,6 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
65
65
|
editDispatchers = _store$useModel[1];
|
66
66
|
|
67
67
|
var topoDispatchers = store.useModelDispatchers("topoMod");
|
68
|
-
var _editState$groups = editState.groups,
|
69
|
-
groups = _editState$groups === void 0 ? [] : _editState$groups;
|
70
68
|
|
71
69
|
var _useState = (0, _react.useState)(false),
|
72
70
|
showComboResDrawer = _useState[0],
|
@@ -315,57 +313,6 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
315
313
|
var deleteNode = function deleteNode(node) {
|
316
314
|
emitEvent(_componentTopologyGraph.TopoEvent.EVENT_TRIGGER_DELETE, node);
|
317
315
|
};
|
318
|
-
/**
|
319
|
-
* 删除视图内的资源
|
320
|
-
*/
|
321
|
-
|
322
|
-
|
323
|
-
var deleteViewNode = function deleteViewNode(node) {
|
324
|
-
var nodeId = node.id;
|
325
|
-
var viewResources = resourceConfig.getViewResources();
|
326
|
-
var index = viewResources["static"].indexOf(nodeId);
|
327
|
-
|
328
|
-
if (index > -1) {
|
329
|
-
editDispatchers.updateResources({
|
330
|
-
"static": viewResources["static"].filter(function (item) {
|
331
|
-
return item !== nodeId;
|
332
|
-
})
|
333
|
-
});
|
334
|
-
}
|
335
|
-
};
|
336
|
-
/**
|
337
|
-
* 删除容器内的单个资源
|
338
|
-
*
|
339
|
-
* @param allGroups
|
340
|
-
* @param node 资源
|
341
|
-
*/
|
342
|
-
|
343
|
-
|
344
|
-
var deleteGroupNode = function deleteGroupNode(allGroups, node) {
|
345
|
-
var nodeId = node.id; // 更新容器内的资源
|
346
|
-
|
347
|
-
var newGroups = allGroups.map(function (g) {
|
348
|
-
var newGroup = g;
|
349
|
-
|
350
|
-
if (resourceConfig.isGroupContainsNode(g, node)) {
|
351
|
-
newGroup = (0, _extends2["default"])({}, g, {
|
352
|
-
resources: resourceConfig.removeStaticResource(g.resources, nodeId)
|
353
|
-
});
|
354
|
-
}
|
355
|
-
|
356
|
-
return newGroup;
|
357
|
-
});
|
358
|
-
|
359
|
-
_rlog["default"].info("删除容器内的单个资源", {
|
360
|
-
groups: groups,
|
361
|
-
node: node,
|
362
|
-
newGroups: newGroups
|
363
|
-
});
|
364
|
-
|
365
|
-
editDispatchers.update({
|
366
|
-
groups: newGroups
|
367
|
-
});
|
368
|
-
};
|
369
316
|
|
370
317
|
var handleDeleteNode = function handleDeleteNode(element) {
|
371
318
|
var _topo$options$editor;
|
@@ -677,9 +624,13 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
677
624
|
topo.linkDynamicStyleExecutor.execute();
|
678
625
|
}
|
679
626
|
|
680
|
-
topo.historyManager.endTransaction();
|
627
|
+
topo.historyManager.endTransaction(); // 添加资源后隐藏资源面板
|
681
628
|
|
682
|
-
|
629
|
+
topoEditDispatchers.update({
|
630
|
+
resourceTabactiveKey: null
|
631
|
+
});
|
632
|
+
|
633
|
+
case 13:
|
683
634
|
case "end":
|
684
635
|
return _context15.stop();
|
685
636
|
}
|
@@ -762,8 +713,11 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
762
713
|
|
763
714
|
case 9:
|
764
715
|
topo.historyManager.endTransaction();
|
716
|
+
topoEditDispatchers.update({
|
717
|
+
resourceTabactiveKey: null
|
718
|
+
});
|
765
719
|
|
766
|
-
case
|
720
|
+
case 11:
|
767
721
|
case "end":
|
768
722
|
return _context7.stop();
|
769
723
|
}
|
@@ -1156,6 +1110,16 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
1156
1110
|
|
1157
1111
|
var effectsState = store.useModelEffectsState("topoConfig");
|
1158
1112
|
var topoLoading = effectsState.getTopoByConditions.isLoading;
|
1113
|
+
/**
|
1114
|
+
* 设置视图鼠标模式
|
1115
|
+
*/
|
1116
|
+
|
1117
|
+
var setViewMouseMode = (0, _react.useCallback)(function (mode) {
|
1118
|
+
topo.getHtTopo().setViewMouseMode(mode);
|
1119
|
+
topoEditDispatchers.update({
|
1120
|
+
viewMouseMode: mode
|
1121
|
+
});
|
1122
|
+
}, []);
|
1159
1123
|
return {
|
1160
1124
|
resourceConfig: resourceConfig,
|
1161
1125
|
|
@@ -1163,6 +1127,7 @@ var useTopoEdit = function useTopoEdit(params) {
|
|
1163
1127
|
* 拓扑结构加载中状态
|
1164
1128
|
*/
|
1165
1129
|
topoLoading: topoLoading,
|
1130
|
+
setViewMouseMode: setViewMouseMode,
|
1166
1131
|
|
1167
1132
|
/**
|
1168
1133
|
* 资源绑定(多选)抽屉显示状态
|
@@ -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.
|
55
|
+
var version = typeof "6.0.0-alpha.6" === 'string' ? "6.0.0-alpha.6" : null;
|
56
56
|
console.info("\u62D3\u6251\u7248\u672C: " + version);
|
57
57
|
/**
|
58
58
|
* 拓扑显示和编辑
|
@@ -36,10 +36,16 @@ var TopoGraphView = /*#__PURE__*/function () {
|
|
36
36
|
this.contextMenu = new _ContextMenu["default"]();
|
37
37
|
};
|
38
38
|
|
39
|
-
_proto.
|
39
|
+
_proto.getHtGraphView = function getHtGraphView() {
|
40
40
|
var _this$topoClient;
|
41
41
|
|
42
|
-
return (_this$topoClient = this.topoClient) === null || _this$topoClient === void 0 ? void 0 : _this$topoClient.
|
42
|
+
return (_this$topoClient = this.topoClient) === null || _this$topoClient === void 0 ? void 0 : _this$topoClient.getGraphView();
|
43
|
+
};
|
44
|
+
|
45
|
+
_proto.getHtDataModel = function getHtDataModel() {
|
46
|
+
var _this$topoClient2;
|
47
|
+
|
48
|
+
return (_this$topoClient2 = this.topoClient) === null || _this$topoClient2 === void 0 ? void 0 : _this$topoClient2.getDataModel();
|
43
49
|
}
|
44
50
|
/**
|
45
51
|
* 缩放平移整个拓扑以展示所有的图元
|