@nocobase/plugin-graph-collection-manager 0.11.0-alpha.1 → 0.11.1-alpha.2
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/lib/client/GraphDrawPage.js +11 -4
- package/lib/client/action-hooks.d.ts +14 -1
- package/lib/client/action-hooks.js +9 -7
- package/lib/client/components/EditCollectionAction.d.ts +2 -1
- package/lib/client/components/EditCollectionAction.js +3 -12
- package/lib/client/components/Entity.js +16 -28
- package/lib/client/style.d.ts +12 -9
- package/lib/client/style.js +208 -193
- package/lib/client/utils.d.ts +3 -4
- package/package.json +7 -7
- package/src/client/GraphDrawPage.tsx +17 -10
- package/src/client/action-hooks.tsx +11 -6
- package/src/client/components/EditCollectionAction.tsx +3 -15
- package/src/client/components/Entity.tsx +15 -30
- package/src/client/style.tsx +205 -184
package/lib/client/style.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = void 0;
|
|
7
7
|
function _client() {
|
|
8
8
|
const data = require("@nocobase/client");
|
|
9
9
|
_client = function _client() {
|
|
@@ -11,208 +11,223 @@ function _client() {
|
|
|
11
11
|
};
|
|
12
12
|
return data;
|
|
13
13
|
}
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
.morePorts {
|
|
40
|
-
max-height: 300px;
|
|
41
|
-
overflow: auto;
|
|
42
|
-
}
|
|
43
|
-
.body-item {
|
|
44
|
-
display: inline-table;
|
|
45
|
-
width: 100%;
|
|
46
|
-
max-width: 250px;
|
|
47
|
-
height: 40px;
|
|
48
|
-
font-size: 14px;
|
|
49
|
-
color: rgba(0, 0, 0, 0.85);
|
|
50
|
-
height: 40px;
|
|
51
|
-
border-top: 1px solid #f0f0f0;
|
|
52
|
-
text-overflow: ellipsis;
|
|
53
|
-
display: flex;
|
|
54
|
-
flex-direction: row;
|
|
55
|
-
align-items: center;
|
|
56
|
-
justify-content: space-between;
|
|
57
|
-
|
|
58
|
-
.field-operator {
|
|
59
|
-
display: none;
|
|
14
|
+
const useStyles = (0, _client().createStyles)(({
|
|
15
|
+
token,
|
|
16
|
+
css
|
|
17
|
+
}) => {
|
|
18
|
+
return {
|
|
19
|
+
// 右下角的小画布
|
|
20
|
+
graphMinimap: css`
|
|
21
|
+
.x6-widget-minimap {
|
|
22
|
+
background-color: ${token.colorBgContainer};
|
|
23
|
+
}
|
|
24
|
+
`,
|
|
25
|
+
addButtonClass: css`
|
|
26
|
+
flex-shrink: 0;
|
|
27
|
+
padding: 2em 0;
|
|
28
|
+
`,
|
|
29
|
+
entityContainer: css`
|
|
30
|
+
.btn-del {
|
|
31
|
+
border-color: transparent;
|
|
32
|
+
background-color: ${token.colorErrorBg};
|
|
33
|
+
color: ${token.colorErrorText};
|
|
34
|
+
height: 20px;
|
|
35
|
+
width: 20px;
|
|
36
|
+
&:hover {
|
|
37
|
+
background-color: ${token.colorErrorBgHover};
|
|
38
|
+
}
|
|
60
39
|
}
|
|
40
|
+
.btn-add {
|
|
41
|
+
background: ${token.colorSuccessBg};
|
|
42
|
+
border-color: transparent;
|
|
43
|
+
color: ${token.colorSuccessText};
|
|
44
|
+
width: 20px;
|
|
45
|
+
&:hover {
|
|
46
|
+
background-color: ${token.colorSuccessBgHover};
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
.btn-edit {
|
|
50
|
+
color: ${token.colorText};
|
|
51
|
+
display: flex;
|
|
52
|
+
&:hover {
|
|
53
|
+
background: ${token.colorBgTextHover};
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
.btn-edit-in-head {
|
|
57
|
+
border-color: transparent;
|
|
58
|
+
color: ${token.colorText};
|
|
59
|
+
height: 20px;
|
|
60
|
+
width: 22px;
|
|
61
|
+
margin: 0px 5px 4px;
|
|
62
|
+
line-height: 25px;
|
|
63
|
+
&:hover {
|
|
64
|
+
background: ${token.colorBgTextHover};
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
width: 250px;
|
|
68
|
+
height: 100%;
|
|
69
|
+
border-radius: ${token.borderRadiusLG}px;
|
|
70
|
+
background-color: ${token.colorBgContainer};
|
|
71
|
+
border: 0;
|
|
72
|
+
overflow: hidden;
|
|
61
73
|
&:hover {
|
|
62
|
-
|
|
74
|
+
box-shadow: ${token.boxShadowTertiary};
|
|
75
|
+
}
|
|
76
|
+
.body {
|
|
77
|
+
width: 100%;
|
|
78
|
+
height: 100%;
|
|
79
|
+
background-color: ${token.colorBgContainer};
|
|
80
|
+
cursor: pointer;
|
|
81
|
+
.morePorts {
|
|
82
|
+
max-height: 300px;
|
|
83
|
+
overflow: auto;
|
|
84
|
+
}
|
|
85
|
+
.body-item {
|
|
86
|
+
display: inline-table;
|
|
87
|
+
width: 100%;
|
|
88
|
+
max-width: 250px;
|
|
89
|
+
height: 40px;
|
|
90
|
+
font-size: 14px;
|
|
91
|
+
color: ${token.colorText};
|
|
92
|
+
border-top: 1px solid ${token.colorBorderSecondary};
|
|
93
|
+
text-overflow: ellipsis;
|
|
63
94
|
display: flex;
|
|
64
|
-
flex-direction: row
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
background: #fff;
|
|
71
|
-
padding-right: 3px;
|
|
72
|
-
span {
|
|
73
|
-
margin: 3px;
|
|
74
|
-
margin-left: 4px;
|
|
75
|
-
padding: 3px;
|
|
76
|
-
height: 20px;
|
|
77
|
-
width: 20px;
|
|
95
|
+
flex-direction: row;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: space-between;
|
|
98
|
+
|
|
99
|
+
.field-operator {
|
|
100
|
+
display: none;
|
|
78
101
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
102
|
+
&:hover {
|
|
103
|
+
.field-operator {
|
|
104
|
+
display: flex;
|
|
105
|
+
flex-direction: row-reverse;
|
|
106
|
+
height: 32px;
|
|
107
|
+
line-height: 32px;
|
|
108
|
+
z-index: 999;
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
text-align: right;
|
|
111
|
+
background: ${token.colorBgContainer};
|
|
112
|
+
padding-right: 3px;
|
|
113
|
+
span {
|
|
114
|
+
margin: 3px;
|
|
115
|
+
margin-left: 4px;
|
|
116
|
+
padding: 3px;
|
|
117
|
+
height: 20px;
|
|
118
|
+
width: 20px;
|
|
119
|
+
}
|
|
120
|
+
.btn-override {
|
|
121
|
+
border-color: transparent;
|
|
122
|
+
width: 20px;
|
|
123
|
+
color: ${token.colorText};
|
|
124
|
+
&:hover {
|
|
125
|
+
background-color: ${token.colorBgTextHover};
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
.btn-view {
|
|
129
|
+
border-color: transparent;
|
|
130
|
+
color: ${token.colorText};
|
|
131
|
+
width: 20px;
|
|
132
|
+
}
|
|
133
|
+
.btn-view:hover {
|
|
134
|
+
background: ${token.colorBgTextHover};
|
|
135
|
+
}
|
|
86
136
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
background: rgb(232 255 234);
|
|
90
|
-
border-color: transparent;
|
|
91
|
-
color: rgb(0, 180, 42);
|
|
92
|
-
width: 20px;
|
|
93
|
-
}
|
|
94
|
-
.btn-edit {
|
|
95
|
-
color: rgba(0, 0, 0, 0.85);
|
|
96
|
-
display: flex;
|
|
97
|
-
}
|
|
98
|
-
.btn-edit:hover {
|
|
99
|
-
background: rgb(229 230 235);
|
|
100
|
-
}
|
|
101
|
-
.btn-override {
|
|
102
|
-
border-color: transparent;
|
|
103
|
-
width: 20px;
|
|
104
|
-
color: rgba(0, 0, 0, 0.85);
|
|
105
|
-
&:hover {
|
|
106
|
-
background-color: rgb(229 230 235);
|
|
137
|
+
.field_type {
|
|
138
|
+
display: none;
|
|
107
139
|
}
|
|
108
140
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
141
|
+
|
|
142
|
+
.name {
|
|
143
|
+
text-overflow: ellipsis;
|
|
144
|
+
white-space: nowrap;
|
|
145
|
+
overflow: hidden;
|
|
146
|
+
margin-left: 8px;
|
|
113
147
|
}
|
|
114
|
-
|
|
115
|
-
|
|
148
|
+
|
|
149
|
+
.type {
|
|
150
|
+
color: ${token.colorTextTertiary};
|
|
151
|
+
margin-right: 8px;
|
|
152
|
+
text-overflow: ellipsis;
|
|
153
|
+
white-space: nowrap;
|
|
154
|
+
overflow: hidden;
|
|
116
155
|
}
|
|
117
156
|
}
|
|
118
|
-
.field_type {
|
|
119
|
-
display: none;
|
|
120
|
-
}
|
|
121
157
|
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
158
|
+
`,
|
|
159
|
+
headClass: css`
|
|
160
|
+
height: 50px;
|
|
161
|
+
font-size: 14px;
|
|
162
|
+
font-weight: 500;
|
|
163
|
+
display: flex;
|
|
164
|
+
flex-direction: row;
|
|
165
|
+
justify-content: space-between;
|
|
166
|
+
align-items: center;
|
|
167
|
+
background: ${token.colorFillAlter};
|
|
168
|
+
color: ${token.colorTextHeading};
|
|
169
|
+
padding: 0 8px;
|
|
170
|
+
`,
|
|
171
|
+
tableNameClass: css`
|
|
172
|
+
max-width: 80%;
|
|
173
|
+
overflow: hidden;
|
|
174
|
+
text-overflow: ellipsis;
|
|
175
|
+
white-space: nowrap;
|
|
176
|
+
font-weight: 500;
|
|
177
|
+
`,
|
|
178
|
+
tableBtnClass: css`
|
|
179
|
+
display: flex;
|
|
180
|
+
span {
|
|
181
|
+
cursor: pointer;
|
|
128
182
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
font-size: 14px;
|
|
144
|
-
font-weight: 500;
|
|
145
|
-
display: flex;
|
|
146
|
-
flex-direction: row;
|
|
147
|
-
justify-content: space-between;
|
|
148
|
-
align-items: center;
|
|
149
|
-
background: #fafafa;
|
|
150
|
-
color: rgb(29 33 41);
|
|
151
|
-
padding: 0 8px;
|
|
152
|
-
border-radius: 3px;
|
|
153
|
-
`;
|
|
154
|
-
exports.headClass = headClass;
|
|
155
|
-
const tableNameClass = (0, _client().css)`
|
|
156
|
-
max-width: 80%;
|
|
157
|
-
overflow: hidden;
|
|
158
|
-
text-overflow: ellipsis;
|
|
159
|
-
white-space: nowrap;
|
|
160
|
-
font-weight: 500;
|
|
161
|
-
`;
|
|
162
|
-
exports.tableNameClass = tableNameClass;
|
|
163
|
-
const tableBtnClass = (0, _client().css)`
|
|
164
|
-
display: flex;
|
|
165
|
-
span {
|
|
166
|
-
cursor: pointer;
|
|
167
|
-
}
|
|
168
|
-
`;
|
|
169
|
-
exports.tableBtnClass = tableBtnClass;
|
|
170
|
-
const collectiionPopoverClass = (0, _client().css)`
|
|
171
|
-
div.field-content {
|
|
172
|
-
font-size: 14px;
|
|
173
|
-
color: rgb(134 144 156);
|
|
174
|
-
opacity: 0.8;
|
|
175
|
-
display: block;
|
|
176
|
-
.field-type {
|
|
177
|
-
color: #333;
|
|
183
|
+
`,
|
|
184
|
+
collectionPopoverClass: css`
|
|
185
|
+
div.field-content {
|
|
186
|
+
font-size: 14px;
|
|
187
|
+
color: ${token.colorTextSecondary};
|
|
188
|
+
opacity: 0.8;
|
|
189
|
+
display: block;
|
|
190
|
+
.field-type {
|
|
191
|
+
color: ${token.colorText};
|
|
192
|
+
float: right;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
`,
|
|
196
|
+
collectionListClass: css`
|
|
178
197
|
float: right;
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
width: calc(100vw) !important;
|
|
216
|
-
}
|
|
217
|
-
`;
|
|
218
|
-
exports.graphCollectionContainerClass = graphCollectionContainerClass;
|
|
198
|
+
position: fixed;
|
|
199
|
+
margin-top: 24px;
|
|
200
|
+
right: 24px;
|
|
201
|
+
z-index: 1000;
|
|
202
|
+
.trigger {
|
|
203
|
+
float: right;
|
|
204
|
+
margin: 2px 4px;
|
|
205
|
+
font-size: 16px;
|
|
206
|
+
}
|
|
207
|
+
.ant-input {
|
|
208
|
+
margin: 4px;
|
|
209
|
+
}
|
|
210
|
+
.ant-menu-inline {
|
|
211
|
+
border-top: 1px solid ${token.colorBorderSecondary};
|
|
212
|
+
}
|
|
213
|
+
.ant-layout-sider {
|
|
214
|
+
margin-top: 24px;
|
|
215
|
+
}
|
|
216
|
+
.ant-menu-item {
|
|
217
|
+
height: 32px;
|
|
218
|
+
}
|
|
219
|
+
.ant-btn {
|
|
220
|
+
border: 0;
|
|
221
|
+
}
|
|
222
|
+
`,
|
|
223
|
+
graphCollectionContainerClass: css`
|
|
224
|
+
overflow: hidden;
|
|
225
|
+
.x6-graph-scroller {
|
|
226
|
+
height: calc(100vh) !important;
|
|
227
|
+
width: calc(100vw) !important;
|
|
228
|
+
}
|
|
229
|
+
`
|
|
230
|
+
};
|
|
231
|
+
});
|
|
232
|
+
var _default = useStyles;
|
|
233
|
+
exports.default = _default;
|
package/lib/client/utils.d.ts
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import { lodash } from '@nocobase/utils/client';
|
|
2
1
|
export declare const useGCMTranslation: () => import("react-i18next").UseTranslationResponse<"graph-collection-manager", undefined>;
|
|
3
|
-
export declare const getInheritCollections: (collections: any, name: any) => any
|
|
2
|
+
export declare const getInheritCollections: (collections: any, name: any) => any;
|
|
4
3
|
export declare const getChildrenCollections: (collections: any, name: any) => any[];
|
|
5
4
|
export declare const formatData: (data: any) => {
|
|
6
5
|
nodesData: any;
|
|
7
|
-
edgesData: any
|
|
6
|
+
edgesData: any;
|
|
8
7
|
inheritEdges: any[];
|
|
9
8
|
};
|
|
10
|
-
export declare const formatPortData: (ports: any) =>
|
|
9
|
+
export declare const formatPortData: (ports: any) => any;
|
|
11
10
|
export declare const formatInheritEdgeData: (collections: any) => any[];
|
|
12
11
|
export declare const getDiffNode: (newNodes: any, oldNodes: any) => any[];
|
|
13
12
|
export declare const getDiffEdge: (newEdges: any, oldEdges: any) => any[];
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"displayName.zh-CN": "数据库可视化管理",
|
|
5
5
|
"description": "database collection manage",
|
|
6
6
|
"description.zh-CN": "数据库管理。",
|
|
7
|
-
"version": "0.11.
|
|
7
|
+
"version": "0.11.1-alpha.2",
|
|
8
8
|
"license": "AGPL-3.0",
|
|
9
9
|
"main": "./lib/server/index.js",
|
|
10
10
|
"files": [
|
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
"@formily/react": "2.2.26",
|
|
30
30
|
"@formily/reactive": "2.2.26",
|
|
31
31
|
"@formily/shared": "2.2.26",
|
|
32
|
-
"@nocobase/client": "0.11.
|
|
33
|
-
"@nocobase/database": "0.11.
|
|
34
|
-
"@nocobase/server": "0.11.
|
|
35
|
-
"@nocobase/test": "0.11.
|
|
36
|
-
"@nocobase/utils": "0.11.
|
|
32
|
+
"@nocobase/client": "0.11.1-alpha.2",
|
|
33
|
+
"@nocobase/database": "0.11.1-alpha.2",
|
|
34
|
+
"@nocobase/server": "0.11.1-alpha.2",
|
|
35
|
+
"@nocobase/test": "0.11.1-alpha.2",
|
|
36
|
+
"@nocobase/utils": "0.11.1-alpha.2",
|
|
37
37
|
"antd": "^5.6.4",
|
|
38
38
|
"react": "^18.2.0",
|
|
39
39
|
"react-i18next": "^11.15.1"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "8482aa720ea1c3abbbb9fe1208e73778bd63f1cf"
|
|
42
42
|
}
|
|
@@ -11,32 +11,33 @@ import '@antv/x6-react-shape';
|
|
|
11
11
|
import { SchemaOptionsContext } from '@formily/react';
|
|
12
12
|
import {
|
|
13
13
|
APIClientProvider,
|
|
14
|
-
collection,
|
|
15
14
|
CollectionCategroriesContext,
|
|
16
15
|
CollectionCategroriesProvider,
|
|
17
16
|
CollectionManagerContext,
|
|
18
17
|
CollectionManagerProvider,
|
|
19
|
-
css,
|
|
20
18
|
CurrentAppInfoContext,
|
|
21
|
-
cx,
|
|
22
19
|
SchemaComponent,
|
|
23
20
|
SchemaComponentOptions,
|
|
24
21
|
Select,
|
|
22
|
+
collection,
|
|
23
|
+
css,
|
|
24
|
+
cx,
|
|
25
25
|
useAPIClient,
|
|
26
26
|
useCollectionManager,
|
|
27
27
|
useCompile,
|
|
28
28
|
useCurrentAppInfo,
|
|
29
|
+
useGlobalTheme,
|
|
29
30
|
} from '@nocobase/client';
|
|
30
31
|
import { lodash } from '@nocobase/utils/client';
|
|
31
32
|
import { useFullscreen } from 'ahooks';
|
|
32
|
-
import { Button, Input, Layout, Menu, Popover, Switch, Tooltip } from 'antd';
|
|
33
|
+
import { Button, ConfigProvider, Input, Layout, Menu, Popover, Switch, Tooltip } from 'antd';
|
|
33
34
|
import dagre from 'dagre';
|
|
34
35
|
import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react';
|
|
35
36
|
import { useAsyncDataSource, useCreateActionAndRefreshCM } from './action-hooks';
|
|
36
37
|
import { AddCollectionAction } from './components/AddCollectionAction';
|
|
37
38
|
import Entity from './components/Entity';
|
|
38
39
|
import { SimpleNodeView } from './components/ViewNode';
|
|
39
|
-
import
|
|
40
|
+
import useStyles from './style';
|
|
40
41
|
import {
|
|
41
42
|
formatData,
|
|
42
43
|
getChildrenCollections,
|
|
@@ -364,6 +365,8 @@ const handelResetLayout = () => {
|
|
|
364
365
|
};
|
|
365
366
|
|
|
366
367
|
export const GraphDrawPage = React.memo(() => {
|
|
368
|
+
const { theme } = useGlobalTheme();
|
|
369
|
+
const { styles } = useStyles();
|
|
367
370
|
const options = useContext(SchemaOptionsContext);
|
|
368
371
|
const ctx = useContext(CollectionManagerContext);
|
|
369
372
|
const api = useAPIClient();
|
|
@@ -512,9 +515,12 @@ export const GraphDrawPage = React.memo(() => {
|
|
|
512
515
|
refreshCM={refreshGM}
|
|
513
516
|
interfaces={ctx.interfaces}
|
|
514
517
|
>
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
+
{/* TODO: 因为画布中的卡片是一次性注册进 Graph 的，这里的 theme 是存在闭包里的，因此当主题动态变更时，并不会触发卡片的重新渲染 */}
|
|
519
|
+
<ConfigProvider theme={theme}>
|
|
520
|
+
<div style={{ height: 'auto' }}>
|
|
521
|
+
<Entity node={node} setTargetNode={setTargetNode} targetGraph={targetGraph} />
|
|
522
|
+
</div>
|
|
523
|
+
</ConfigProvider>
|
|
518
524
|
</CollectionManagerProvider>
|
|
519
525
|
</CollectionCategroriesProvider>
|
|
520
526
|
</SchemaComponentOptions>
|
|
@@ -1015,10 +1021,10 @@ export const GraphDrawPage = React.memo(() => {
|
|
|
1015
1021
|
};
|
|
1016
1022
|
return (
|
|
1017
1023
|
<Layout>
|
|
1018
|
-
<div className={
|
|
1024
|
+
<div className={styles.graphCollectionContainerClass}>
|
|
1019
1025
|
<CollectionManagerProvider collections={targetGraph?.collections} refreshCM={refreshGM}>
|
|
1020
1026
|
<CollapsedContext.Provider value={{ collectionList, handleSearchCollection }}>
|
|
1021
|
-
<div className={cx(collectionListClass)}>
|
|
1027
|
+
<div className={cx(styles.collectionListClass)}>
|
|
1022
1028
|
<SchemaComponent
|
|
1023
1029
|
components={{
|
|
1024
1030
|
Select: (props) => (
|
|
@@ -1366,6 +1372,7 @@ export const GraphDrawPage = React.memo(() => {
|
|
|
1366
1372
|
<div id="container" style={{ width: '100vw', height: '100vh' }}></div>
|
|
1367
1373
|
<div
|
|
1368
1374
|
id="graph-minimap"
|
|
1375
|
+
className={styles.graphMinimap}
|
|
1369
1376
|
style={{ width: '300px', height: '250px', right: '10px', bottom: '20px', position: 'fixed' }}
|
|
1370
1377
|
></div>
|
|
1371
1378
|
</div>
|
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
useCompile,
|
|
9
9
|
useRequest,
|
|
10
10
|
} from '@nocobase/client';
|
|
11
|
+
import { error } from '@nocobase/utils/client';
|
|
11
12
|
import { Select, message } from 'antd';
|
|
12
13
|
import { lodash } from '@nocobase/utils/client'
|
|
13
14
|
import React, { useContext, useEffect } from 'react';
|
|
@@ -222,11 +223,15 @@ export const useDestroyFieldActionAndRefreshCM = (props) => {
|
|
|
222
223
|
export const useAsyncDataSource = (service: any) => {
|
|
223
224
|
return (field: any, { targetScope }) => {
|
|
224
225
|
field.loading = true;
|
|
225
|
-
service(targetScope)
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
226
|
+
service(targetScope)
|
|
227
|
+
.then(
|
|
228
|
+
action.bound((data: any) => {
|
|
229
|
+
field.dataSource = data;
|
|
230
|
+
field.loading = false;
|
|
231
|
+
}),
|
|
232
|
+
)
|
|
233
|
+
.catch((err) => {
|
|
234
|
+
error(err);
|
|
235
|
+
});
|
|
231
236
|
};
|
|
232
237
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { EditOutlined } from '@ant-design/icons';
|
|
2
|
-
import {
|
|
2
|
+
import { EditCollection } from '@nocobase/client';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { useCancelAction, useUpdateCollectionActionAndRefreshCM } from '../action-hooks';
|
|
5
5
|
import { getPopupContainer } from '../utils';
|
|
6
6
|
|
|
7
|
-
export const EditCollectionAction = ({ item: record }) => {
|
|
7
|
+
export const EditCollectionAction = ({ item: record, className }) => {
|
|
8
8
|
return (
|
|
9
9
|
<EditCollection
|
|
10
10
|
item={record}
|
|
@@ -15,19 +15,7 @@ export const EditCollectionAction = ({ item: record }) => {
|
|
|
15
15
|
}}
|
|
16
16
|
getContainer={getPopupContainer}
|
|
17
17
|
>
|
|
18
|
-
<EditOutlined
|
|
19
|
-
className={css`
|
|
20
|
-
border-color: transparent;
|
|
21
|
-
color: rgb(78 89 105);
|
|
22
|
-
height: 20px;
|
|
23
|
-
width: 22px;
|
|
24
|
-
margin: 0px 5px 4px;
|
|
25
|
-
line-height: 25px;
|
|
26
|
-
&:hover {
|
|
27
|
-
background-color: rgb(229 230 235);
|
|
28
|
-
}
|
|
29
|
-
`}
|
|
30
|
-
/>
|
|
18
|
+
<EditOutlined className={className} />
|
|
31
19
|
</EditCollection>
|
|
32
20
|
);
|
|
33
21
|
};
|