@riil-frontend/component-topology 10.0.19 → 10.0.21

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.
@@ -184,7 +184,7 @@ function BoxBackgroundSetting(props) {
184
184
  }, /*#__PURE__*/React.createElement("span", null, "\u8FB9\u6846"), /*#__PURE__*/React.createElement("div", {
185
185
  className: styles.borderWidth
186
186
  }, /*#__PURE__*/React.createElement("img", {
187
- src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
187
+ src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u8FB9\u6846.svg"
188
188
  }), /*#__PURE__*/React.createElement(FontColorRange, {
189
189
  max: 10,
190
190
  min: 1,
@@ -195,7 +195,7 @@ function BoxBackgroundSetting(props) {
195
195
  })), /*#__PURE__*/React.createElement("div", {
196
196
  className: styles.backOpacity
197
197
  }, /*#__PURE__*/React.createElement("img", {
198
- src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u8FB9\u6846.svg"
198
+ src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
199
199
  }), /*#__PURE__*/React.createElement(FontColorRange, {
200
200
  max: 100,
201
201
  min: 0,
@@ -124,7 +124,7 @@ export function setGroupStyle(element, style, tagStyle) {
124
124
  } else {
125
125
  borderCurrentColor = {
126
126
  background: prevStyle.background,
127
- opacity: style.backgroundOpacity === undefined ? 1 : style.backgroundOpacity
127
+ opacity: style.borderOpacity === undefined ? 1 : style.borderOpacity
128
128
  };
129
129
  }
130
130
 
@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
24
24
  import SelectionModel from "./SelectionModel";
25
25
  import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
26
26
 
27
- var version = typeof "10.0.19" === 'string' ? "10.0.19" : null;
27
+ var version = typeof "10.0.21" === 'string' ? "10.0.21" : null;
28
28
  console.info("\u62D3\u6251\u7248\u672C: " + version);
29
29
  /**
30
30
  * 拓扑显示和编辑
@@ -1,5 +1,4 @@
1
1
  import React, { useRef } from 'react';
2
- import { TopoEvent } from '@riil-frontend/component-topology-graph';
3
2
  import DefaultDetailContent from "../../ResourceDetail/DefaultDetailContent";
4
3
 
5
4
  function useElementDetailManager(props) {
@@ -14,7 +13,6 @@ function useElementDetailManager(props) {
14
13
  var visible = resourceDetailState.visible,
15
14
  id = resourceDetailState.id;
16
15
  var resourceData = topo.dataModel.useDataById(id);
17
- var currentHtElementRef = useRef(null);
18
16
 
19
17
  function init() {
20
18
  var notifier = topo.view.topoClient.notifier;
@@ -24,10 +22,14 @@ function useElementDetailManager(props) {
24
22
 
25
23
  function destroy() {
26
24
  var notifier = topo.view.topoClient.notifier;
25
+
26
+ if (!notifier) {
27
+ return;
28
+ }
29
+
27
30
  notifier.off('topo_element_double_click', handleDblClick);
28
31
  notifier.off('topo_element_click', handleClick); // 清除数据
29
32
 
30
- currentHtElementRef.current = null;
31
33
  resourceDetailDispatchers.reset();
32
34
  var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
33
35
  topoDispatchers.update({
@@ -38,32 +40,17 @@ function useElementDetailManager(props) {
38
40
 
39
41
  /**
40
42
  *
41
- * @param {{id: string, htElement?}} data
43
+ * @param {{id: string, htElement}} data
42
44
  * @returns
43
45
  */
44
46
 
45
47
 
46
48
  function open(data) {
47
- var id = data.id;
48
- var resourceData = topo.dataModel.getDataById(id);
49
- var htElement = data.htElement || topo.getDataModel().getDataByTag(id); // 如果是资源/链路,没有权限不显示
50
-
51
- if (resourceData) {
52
- var operation = resourceData.operation,
53
- permission = resourceData.permission;
54
-
55
- if (!operation && !(permission !== null && permission !== void 0 && permission.readable)) {
56
- return;
57
- }
58
- } // 自定义显示方法
59
-
60
-
61
- if (!canShow(htElement)) {
62
- return;
63
- }
64
-
49
+ var id = data.id,
50
+ htElement = data.htElement;
65
51
  var content = getDetailContent({
66
- id: id
52
+ id: id,
53
+ htElement: htElement
67
54
  });
68
55
 
69
56
  if (content) {
@@ -74,13 +61,27 @@ function useElementDetailManager(props) {
74
61
  }
75
62
  }
76
63
 
64
+ function openByHtElement(htElement) {
65
+ open({
66
+ id: htElement.getTag() || "ht:" + htElement.getId(),
67
+ htElement: htElement
68
+ });
69
+ }
70
+
71
+ function openByDataId(dataId) {
72
+ var htElement = topo.getDataModel().getDataByTag(id);
73
+ open({
74
+ id: dataId,
75
+ htElement: htElement
76
+ });
77
+ }
78
+
77
79
  function change(data) {
78
80
  open(data);
79
81
  } // 重置
80
82
 
81
83
 
82
84
  function reset() {
83
- currentHtElementRef.current = null;
84
85
  resourceDetailDispatchers.reset();
85
86
  var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
86
87
  topoDispatchers.update({
@@ -91,7 +92,6 @@ function useElementDetailManager(props) {
91
92
 
92
93
 
93
94
  function close() {
94
- currentHtElementRef.current = null;
95
95
  resourceDetailDispatchers.update({
96
96
  visible: false
97
97
  });
@@ -103,10 +103,7 @@ function useElementDetailManager(props) {
103
103
  lock = _topo$store$getModelS.lock;
104
104
 
105
105
  if (lock) {
106
- open({
107
- id: htElement.getTag() || "ht:" + htElement.getId(),
108
- htElement: htElement
109
- });
106
+ openByHtElement(htElement);
110
107
  }
111
108
  } // 单击切换
112
109
 
@@ -119,11 +116,7 @@ function useElementDetailManager(props) {
119
116
  return;
120
117
  }
121
118
 
122
- var data = htElement.getAttrObject();
123
- open({
124
- id: data.id,
125
- htElement: htElement
126
- });
119
+ openByHtElement(htElement);
127
120
  }
128
121
 
129
122
  function getDefaultDetailContent(_ref) {
@@ -142,14 +135,24 @@ function useElementDetailManager(props) {
142
135
  }
143
136
 
144
137
  function getDetailContent(_ref2) {
145
- var id = _ref2.id;
138
+ var id = _ref2.id,
139
+ htElement = _ref2.htElement;
140
+ var resourceData = topo.dataModel.getDataById(id); // 如果是资源/链路,没有权限不显示
141
+
142
+ if (resourceData) {
143
+ var operation = resourceData.operation,
144
+ permission = resourceData.permission;
146
145
 
147
- if (!id) {
148
- return null;
146
+ if (!operation && !(permission !== null && permission !== void 0 && permission.readable)) {
147
+ return;
148
+ }
149
+ } // 自定义显示方法
150
+
151
+
152
+ if (!canShow(htElement)) {
153
+ return;
149
154
  }
150
155
 
151
- var resourceData = topo.dataModel.getDataById(id);
152
- var htElement = topo.getDataModel().getDataByTag(id);
153
156
  var widget; // 支持自定义概览
154
157
 
155
158
  var _ref3 = resourceDetailProps || {},
@@ -174,9 +177,15 @@ function useElementDetailManager(props) {
174
177
  return widget;
175
178
  }
176
179
 
177
- var Content = visible && id ? getDetailContent({
178
- id: id
179
- }) : null;
180
+ function getDetailContentById(id) {
181
+ var htElement = topo.getDataModel().getDataByTag(id) || topo.getDataModel().getDataById(id.replace('ht:', ''));
182
+ return getDetailContent({
183
+ id: id,
184
+ htElement: htElement
185
+ });
186
+ }
187
+
188
+ var Content = visible && id ? getDetailContentById(id) : null;
180
189
  var elementDetailManager = {
181
190
  visible: visible,
182
191
  id: id,
@@ -185,6 +194,7 @@ function useElementDetailManager(props) {
185
194
  init: init,
186
195
  destroy: destroy,
187
196
  open: open,
197
+ openByDataId: openByDataId,
188
198
  change: change,
189
199
  reset: reset,
190
200
  close: close,
@@ -13,24 +13,24 @@ function ResourceDetailDrawer(props) {
13
13
  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
14
14
  topoId = _topo$store$useModelS.topoId;
15
15
 
16
- var elementDetailManager = useElementDetailManager({
16
+ var detailManager = useElementDetailManager({
17
17
  topo: topo,
18
18
  canShow: canShow,
19
19
  resourceDetailProps: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps
20
20
  });
21
- var visible = elementDetailManager.visible,
22
- id = elementDetailManager.id,
23
- resourceData = elementDetailManager.resourceData,
24
- Content = elementDetailManager.Content;
21
+ var visible = detailManager.visible,
22
+ id = detailManager.id,
23
+ resourceData = detailManager.resourceData,
24
+ Content = detailManager.Content;
25
25
  useEffect(function () {
26
- elementDetailManager.init();
26
+ detailManager.init();
27
27
  return function () {
28
- elementDetailManager.destroy();
28
+ detailManager.destroy();
29
29
  };
30
30
  }, []); // 解决切换拓扑图隐藏概览
31
31
 
32
32
  useEffect(function () {
33
- elementDetailManager.reset();
33
+ detailManager.reset();
34
34
  }, [topoId]);
35
35
  return /*#__PURE__*/React.createElement(DetailDrawer, {
36
36
  visible: visible,
@@ -38,16 +38,16 @@ function ResourceDetailDrawer(props) {
38
38
  id: id,
39
39
  data: resourceData,
40
40
  topo: topo,
41
- onChange: elementDetailManager.open
41
+ detailManager: detailManager
42
42
  }),
43
- onClose: elementDetailManager.close
43
+ onClose: detailManager.close
44
44
  }, visible && /*#__PURE__*/React.createElement(Content, _extends({}, props, {
45
45
  topo: topo,
46
46
  visible: visible,
47
47
  id: id,
48
48
  viewerProps: viewerProps,
49
- onClose: elementDetailManager.close,
50
- onChangeActive: elementDetailManager.open
49
+ onClose: detailManager.close,
50
+ onChangeActive: detailManager.open
51
51
  })));
52
52
  }
53
53
 
@@ -3,11 +3,15 @@ import React from 'react';
3
3
  import ResourceDetailDrawer from "./ResourceDetailDrawer";
4
4
 
5
5
  function ResourceDetailPlugin(props) {
6
- var viewerProps = props.viewerProps;
6
+ var topo = props.topo,
7
+ viewerProps = props.viewerProps;
7
8
  var resourceDetailProps = viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps;
8
9
  var hideResourceDetailDrawer = (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.hideResourceDetailDrawer) === true;
9
10
 
10
- if (hideResourceDetailDrawer) {
11
+ var _topo$store$useModelS = topo.store.useModelState('topoMod'),
12
+ graphLoaded = _topo$store$useModelS.graphLoaded;
13
+
14
+ if (graphLoaded || hideResourceDetailDrawer) {
11
15
  return null;
12
16
  }
13
17
 
@@ -6,7 +6,7 @@ import styles from "../index.module.scss";
6
6
 
7
7
  function NodeDrawerTitle(_ref) {
8
8
  var id = _ref.id,
9
- onChange = _ref.onChange,
9
+ detailManager = _ref.detailManager,
10
10
  topo = _ref.topo;
11
11
 
12
12
  var _useState = useState(''),
@@ -43,9 +43,7 @@ function NodeDrawerTitle(_ref) {
43
43
  className: styles['drawer-title']
44
44
  }, name),
45
45
  onItemClick: function onItemClick(key) {
46
- return onChange({
47
- id: key
48
- });
46
+ return detailManager.openByDataId(key);
49
47
  }
50
48
  }, isAvailableArray(filterNodes) && filterNodes.length ? filterNodes.map(function (item) {
51
49
  return /*#__PURE__*/React.createElement(_MenuButton.Item, {
@@ -59,7 +57,6 @@ function NodeDrawerTitle(_ref) {
59
57
 
60
58
  function LinkDrawerTitle(_ref2) {
61
59
  var id = _ref2.id,
62
- onChange = _ref2.onChange,
63
60
  topo = _ref2.topo;
64
61
  return /*#__PURE__*/React.createElement("div", {
65
62
  className: styles['drawer-title']
@@ -69,7 +66,6 @@ function LinkDrawerTitle(_ref2) {
69
66
  function Title(props) {
70
67
  var id = props.id,
71
68
  data = props.data,
72
- onChange = props.onChange,
73
69
  topo = props.topo;
74
70
 
75
71
  if (!id) {
@@ -201,7 +201,7 @@ function BoxBackgroundSetting(props) {
201
201
  }, /*#__PURE__*/_react["default"].createElement("span", null, "\u8FB9\u6846"), /*#__PURE__*/_react["default"].createElement("div", {
202
202
  className: _BoxbackgroundSettingsModule["default"].borderWidth
203
203
  }, /*#__PURE__*/_react["default"].createElement("img", {
204
- src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
204
+ src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u8FB9\u6846.svg"
205
205
  }), /*#__PURE__*/_react["default"].createElement(_FontColorRange["default"], {
206
206
  max: 10,
207
207
  min: 1,
@@ -212,7 +212,7 @@ function BoxBackgroundSetting(props) {
212
212
  })), /*#__PURE__*/_react["default"].createElement("div", {
213
213
  className: _BoxbackgroundSettingsModule["default"].backOpacity
214
214
  }, /*#__PURE__*/_react["default"].createElement("img", {
215
- src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u8FB9\u6846.svg"
215
+ src: "/img/topo/editor/toolbar/\u80CC\u666F\u586B\u5145\u53CA\u8FB9\u6846/\u80CC\u666F\u586B\u5145.svg"
216
216
  }), /*#__PURE__*/_react["default"].createElement(_FontColorRange["default"], {
217
217
  max: 100,
218
218
  min: 0,
@@ -142,7 +142,7 @@ function setGroupStyle(element, style, tagStyle) {
142
142
  } else {
143
143
  borderCurrentColor = {
144
144
  background: prevStyle.background,
145
- opacity: style.backgroundOpacity === undefined ? 1 : style.backgroundOpacity
145
+ opacity: style.borderOpacity === undefined ? 1 : style.borderOpacity
146
146
  };
147
147
  }
148
148
 
@@ -56,7 +56,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
56
56
  var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
57
57
 
58
58
  // eslint-disable-next-line no-undef
59
- var version = typeof "10.0.19" === 'string' ? "10.0.19" : null;
59
+ var version = typeof "10.0.21" === 'string' ? "10.0.21" : null;
60
60
  console.info("\u62D3\u6251\u7248\u672C: " + version);
61
61
  /**
62
62
  * 拓扑显示和编辑
@@ -7,8 +7,6 @@ exports["default"] = void 0;
7
7
 
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
 
10
- var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
11
-
12
10
  var _DefaultDetailContent = _interopRequireDefault(require("../../ResourceDetail/DefaultDetailContent"));
13
11
 
14
12
  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); }
@@ -27,7 +25,6 @@ function useElementDetailManager(props) {
27
25
  var visible = resourceDetailState.visible,
28
26
  id = resourceDetailState.id;
29
27
  var resourceData = topo.dataModel.useDataById(id);
30
- var currentHtElementRef = (0, _react.useRef)(null);
31
28
 
32
29
  function init() {
33
30
  var notifier = topo.view.topoClient.notifier;
@@ -37,10 +34,14 @@ function useElementDetailManager(props) {
37
34
 
38
35
  function destroy() {
39
36
  var notifier = topo.view.topoClient.notifier;
37
+
38
+ if (!notifier) {
39
+ return;
40
+ }
41
+
40
42
  notifier.off('topo_element_double_click', handleDblClick);
41
43
  notifier.off('topo_element_click', handleClick); // 清除数据
42
44
 
43
- currentHtElementRef.current = null;
44
45
  resourceDetailDispatchers.reset();
45
46
  var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
46
47
  topoDispatchers.update({
@@ -51,32 +52,17 @@ function useElementDetailManager(props) {
51
52
 
52
53
  /**
53
54
  *
54
- * @param {{id: string, htElement?}} data
55
+ * @param {{id: string, htElement}} data
55
56
  * @returns
56
57
  */
57
58
 
58
59
 
59
60
  function open(data) {
60
- var id = data.id;
61
- var resourceData = topo.dataModel.getDataById(id);
62
- var htElement = data.htElement || topo.getDataModel().getDataByTag(id); // 如果是资源/链路,没有权限不显示
63
-
64
- if (resourceData) {
65
- var operation = resourceData.operation,
66
- permission = resourceData.permission;
67
-
68
- if (!operation && !(permission !== null && permission !== void 0 && permission.readable)) {
69
- return;
70
- }
71
- } // 自定义显示方法
72
-
73
-
74
- if (!canShow(htElement)) {
75
- return;
76
- }
77
-
61
+ var id = data.id,
62
+ htElement = data.htElement;
78
63
  var content = getDetailContent({
79
- id: id
64
+ id: id,
65
+ htElement: htElement
80
66
  });
81
67
 
82
68
  if (content) {
@@ -87,13 +73,27 @@ function useElementDetailManager(props) {
87
73
  }
88
74
  }
89
75
 
76
+ function openByHtElement(htElement) {
77
+ open({
78
+ id: htElement.getTag() || "ht:" + htElement.getId(),
79
+ htElement: htElement
80
+ });
81
+ }
82
+
83
+ function openByDataId(dataId) {
84
+ var htElement = topo.getDataModel().getDataByTag(id);
85
+ open({
86
+ id: dataId,
87
+ htElement: htElement
88
+ });
89
+ }
90
+
90
91
  function change(data) {
91
92
  open(data);
92
93
  } // 重置
93
94
 
94
95
 
95
96
  function reset() {
96
- currentHtElementRef.current = null;
97
97
  resourceDetailDispatchers.reset();
98
98
  var topoDispatchers = topo.store.getModelDispatchers('topoBaseInfoOverview');
99
99
  topoDispatchers.update({
@@ -104,7 +104,6 @@ function useElementDetailManager(props) {
104
104
 
105
105
 
106
106
  function close() {
107
- currentHtElementRef.current = null;
108
107
  resourceDetailDispatchers.update({
109
108
  visible: false
110
109
  });
@@ -116,10 +115,7 @@ function useElementDetailManager(props) {
116
115
  lock = _topo$store$getModelS.lock;
117
116
 
118
117
  if (lock) {
119
- open({
120
- id: htElement.getTag() || "ht:" + htElement.getId(),
121
- htElement: htElement
122
- });
118
+ openByHtElement(htElement);
123
119
  }
124
120
  } // 单击切换
125
121
 
@@ -132,11 +128,7 @@ function useElementDetailManager(props) {
132
128
  return;
133
129
  }
134
130
 
135
- var data = htElement.getAttrObject();
136
- open({
137
- id: data.id,
138
- htElement: htElement
139
- });
131
+ openByHtElement(htElement);
140
132
  }
141
133
 
142
134
  function getDefaultDetailContent(_ref) {
@@ -155,14 +147,24 @@ function useElementDetailManager(props) {
155
147
  }
156
148
 
157
149
  function getDetailContent(_ref2) {
158
- var id = _ref2.id;
150
+ var id = _ref2.id,
151
+ htElement = _ref2.htElement;
152
+ var resourceData = topo.dataModel.getDataById(id); // 如果是资源/链路,没有权限不显示
153
+
154
+ if (resourceData) {
155
+ var operation = resourceData.operation,
156
+ permission = resourceData.permission;
159
157
 
160
- if (!id) {
161
- return null;
158
+ if (!operation && !(permission !== null && permission !== void 0 && permission.readable)) {
159
+ return;
160
+ }
161
+ } // 自定义显示方法
162
+
163
+
164
+ if (!canShow(htElement)) {
165
+ return;
162
166
  }
163
167
 
164
- var resourceData = topo.dataModel.getDataById(id);
165
- var htElement = topo.getDataModel().getDataByTag(id);
166
168
  var widget; // 支持自定义概览
167
169
 
168
170
  var _ref3 = resourceDetailProps || {},
@@ -187,9 +189,15 @@ function useElementDetailManager(props) {
187
189
  return widget;
188
190
  }
189
191
 
190
- var Content = visible && id ? getDetailContent({
191
- id: id
192
- }) : null;
192
+ function getDetailContentById(id) {
193
+ var htElement = topo.getDataModel().getDataByTag(id) || topo.getDataModel().getDataById(id.replace('ht:', ''));
194
+ return getDetailContent({
195
+ id: id,
196
+ htElement: htElement
197
+ });
198
+ }
199
+
200
+ var Content = visible && id ? getDetailContentById(id) : null;
193
201
  var elementDetailManager = {
194
202
  visible: visible,
195
203
  id: id,
@@ -198,6 +206,7 @@ function useElementDetailManager(props) {
198
206
  init: init,
199
207
  destroy: destroy,
200
208
  open: open,
209
+ openByDataId: openByDataId,
201
210
  change: change,
202
211
  reset: reset,
203
212
  close: close,
@@ -29,24 +29,24 @@ function ResourceDetailDrawer(props) {
29
29
  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
30
30
  topoId = _topo$store$useModelS.topoId;
31
31
 
32
- var elementDetailManager = (0, _useElementDetailManager["default"])({
32
+ var detailManager = (0, _useElementDetailManager["default"])({
33
33
  topo: topo,
34
34
  canShow: canShow,
35
35
  resourceDetailProps: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps
36
36
  });
37
- var visible = elementDetailManager.visible,
38
- id = elementDetailManager.id,
39
- resourceData = elementDetailManager.resourceData,
40
- Content = elementDetailManager.Content;
37
+ var visible = detailManager.visible,
38
+ id = detailManager.id,
39
+ resourceData = detailManager.resourceData,
40
+ Content = detailManager.Content;
41
41
  (0, _react.useEffect)(function () {
42
- elementDetailManager.init();
42
+ detailManager.init();
43
43
  return function () {
44
- elementDetailManager.destroy();
44
+ detailManager.destroy();
45
45
  };
46
46
  }, []); // 解决切换拓扑图隐藏概览
47
47
 
48
48
  (0, _react.useEffect)(function () {
49
- elementDetailManager.reset();
49
+ detailManager.reset();
50
50
  }, [topoId]);
51
51
  return /*#__PURE__*/_react["default"].createElement(_DetailDrawer["default"], {
52
52
  visible: visible,
@@ -54,16 +54,16 @@ function ResourceDetailDrawer(props) {
54
54
  id: id,
55
55
  data: resourceData,
56
56
  topo: topo,
57
- onChange: elementDetailManager.open
57
+ detailManager: detailManager
58
58
  }),
59
- onClose: elementDetailManager.close
59
+ onClose: detailManager.close
60
60
  }, visible && /*#__PURE__*/_react["default"].createElement(Content, (0, _extends2["default"])({}, props, {
61
61
  topo: topo,
62
62
  visible: visible,
63
63
  id: id,
64
64
  viewerProps: viewerProps,
65
- onClose: elementDetailManager.close,
66
- onChangeActive: elementDetailManager.open
65
+ onClose: detailManager.close,
66
+ onChangeActive: detailManager.open
67
67
  })));
68
68
  }
69
69
 
@@ -12,11 +12,15 @@ var _react = _interopRequireDefault(require("react"));
12
12
  var _ResourceDetailDrawer = _interopRequireDefault(require("./ResourceDetailDrawer"));
13
13
 
14
14
  function ResourceDetailPlugin(props) {
15
- var viewerProps = props.viewerProps;
15
+ var topo = props.topo,
16
+ viewerProps = props.viewerProps;
16
17
  var resourceDetailProps = viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps;
17
18
  var hideResourceDetailDrawer = (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.hideResourceDetailDrawer) === true;
18
19
 
19
- if (hideResourceDetailDrawer) {
20
+ var _topo$store$useModelS = topo.store.useModelState('topoMod'),
21
+ graphLoaded = _topo$store$useModelS.graphLoaded;
22
+
23
+ if (graphLoaded || hideResourceDetailDrawer) {
20
24
  return null;
21
25
  }
22
26
 
@@ -21,7 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
21
21
 
22
22
  function NodeDrawerTitle(_ref) {
23
23
  var id = _ref.id,
24
- onChange = _ref.onChange,
24
+ detailManager = _ref.detailManager,
25
25
  topo = _ref.topo;
26
26
 
27
27
  var _useState = (0, _react.useState)(''),
@@ -58,9 +58,7 @@ function NodeDrawerTitle(_ref) {
58
58
  className: _indexModule["default"]['drawer-title']
59
59
  }, name),
60
60
  onItemClick: function onItemClick(key) {
61
- return onChange({
62
- id: key
63
- });
61
+ return detailManager.openByDataId(key);
64
62
  }
65
63
  }, (0, _utils.isAvailableArray)(filterNodes) && filterNodes.length ? filterNodes.map(function (item) {
66
64
  return /*#__PURE__*/_react["default"].createElement(_menuButton["default"].Item, {
@@ -74,7 +72,6 @@ function NodeDrawerTitle(_ref) {
74
72
 
75
73
  function LinkDrawerTitle(_ref2) {
76
74
  var id = _ref2.id,
77
- onChange = _ref2.onChange,
78
75
  topo = _ref2.topo;
79
76
  return /*#__PURE__*/_react["default"].createElement("div", {
80
77
  className: _indexModule["default"]['drawer-title']
@@ -84,7 +81,6 @@ function LinkDrawerTitle(_ref2) {
84
81
  function Title(props) {
85
82
  var id = props.id,
86
83
  data = props.data,
87
- onChange = props.onChange,
88
84
  topo = props.topo;
89
85
 
90
86
  if (!id) {