ui-layout-manager-dev 0.0.21 → 0.0.22
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/dist/cjs/index.js +2 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +3 -3
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/LayoutManager/Components/HandleBar/HandleBar.jsx +16 -2
- package/src/stories/layouts/vsCode/workbench.json +155 -13
package/package.json
CHANGED
|
@@ -134,9 +134,23 @@ export const HandleBar = ({orientation, parent, sibling1, sibling2}) => {
|
|
|
134
134
|
if (newSibling1Size < MIN_PANEL_SIZE || newSibling2Size < MIN_PANEL_SIZE) {
|
|
135
135
|
return;
|
|
136
136
|
}
|
|
137
|
+
|
|
138
|
+
// If both siblings are type fill, then set sizes.
|
|
139
|
+
const sibling1Type = startInfo.sibling1LayoutConfig.initial.type;
|
|
140
|
+
const sibling2Type = startInfo.sibling2LayoutConfig.initial.type;
|
|
141
|
+
if (sibling1Type === "fill" && sibling2Type === "fill") {
|
|
142
|
+
controller.containerRefs[sibling1].style[startInfo.propKey] = newSibling1Size + "px";
|
|
143
|
+
controller.containerRefs[sibling2].style[startInfo.propKey] = newSibling2Size + "px";
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
137
146
|
|
|
138
|
-
|
|
139
|
-
|
|
147
|
+
// If one sibling is fill type but the other isn't, don't update, flex box will take care of that
|
|
148
|
+
if (!(sibling1Type === "fill")) {
|
|
149
|
+
controller.containerRefs[sibling1].style[startInfo.propKey] = newSibling1Size + "px";
|
|
150
|
+
}
|
|
151
|
+
if (!(sibling2Type === "fill")) {
|
|
152
|
+
controller.containerRefs[sibling2].style[startInfo.propKey] = newSibling2Size + "px";
|
|
153
|
+
}
|
|
140
154
|
}
|
|
141
155
|
|
|
142
156
|
/**
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
{
|
|
11
11
|
"containerId": "header",
|
|
12
12
|
"type": "container",
|
|
13
|
-
"size": { "initial": { "value":
|
|
13
|
+
"size": { "initial": { "value": 0, "unit": "px", "type": "fixed" }}
|
|
14
14
|
},
|
|
15
15
|
{
|
|
16
16
|
"containerId": "mainBody",
|
|
@@ -38,8 +38,9 @@
|
|
|
38
38
|
{
|
|
39
39
|
"containerId": "sidebar",
|
|
40
40
|
"type": "container",
|
|
41
|
-
"size": { "initial": { "value":
|
|
42
|
-
"collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
|
|
41
|
+
"size": { "initial": { "value": 0, "unit": "px", "type": "fixed" }},
|
|
42
|
+
"collapse": { "value": 400, "condition": "lessThan", "relative": "parent" },
|
|
43
|
+
"showHandlebar": true
|
|
43
44
|
},
|
|
44
45
|
{
|
|
45
46
|
"containerId": "contentContainer",
|
|
@@ -80,12 +81,12 @@
|
|
|
80
81
|
"tabsBar": {
|
|
81
82
|
"tabs": [
|
|
82
83
|
{
|
|
83
|
-
"name": "
|
|
84
|
-
"component": "
|
|
84
|
+
"name": "Terminal",
|
|
85
|
+
"component": "PtyTerminal"
|
|
85
86
|
},
|
|
86
87
|
{
|
|
87
|
-
"name": "
|
|
88
|
-
"component": "
|
|
88
|
+
"name": "Flow",
|
|
89
|
+
"component": "Flow"
|
|
89
90
|
}
|
|
90
91
|
],
|
|
91
92
|
"showClose": true,
|
|
@@ -103,9 +104,9 @@
|
|
|
103
104
|
"containerId": "menuContainer",
|
|
104
105
|
"type": "container",
|
|
105
106
|
"size": {
|
|
106
|
-
"initial": { "value":
|
|
107
|
-
"min": { "value":
|
|
108
|
-
"max": { "value":
|
|
107
|
+
"initial": { "value": 270, "unit": "px", "type": "fixed" },
|
|
108
|
+
"min": { "value": 170, "unit": "px"},
|
|
109
|
+
"max": { "value": 320, "unit": "px"}
|
|
109
110
|
},
|
|
110
111
|
"collapse": { "value": 700, "condition": "lessThan", "relative": "parent" }
|
|
111
112
|
},
|
|
@@ -118,6 +119,31 @@
|
|
|
118
119
|
"containerId": "editorContainer",
|
|
119
120
|
"type": "container",
|
|
120
121
|
"size": { "initial": { "type": "fill" }}
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"type": "handleBar",
|
|
125
|
+
"sibling1": "editorContainer",
|
|
126
|
+
"sibling2": "designLayoutContainer"
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"containerId": "designLayoutContainer",
|
|
130
|
+
"type": "container",
|
|
131
|
+
"size": { "initial": { "type": "fill" }}
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"type": "handleBar",
|
|
135
|
+
"sibling1": "designLayoutContainer",
|
|
136
|
+
"sibling2": "rightMenuContainer"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"containerId": "rightMenuContainer",
|
|
140
|
+
"type": "container",
|
|
141
|
+
"size": {
|
|
142
|
+
"initial": { "value": 270, "unit": "px", "type": "fixed" },
|
|
143
|
+
"min": { "value": 170, "unit": "px"},
|
|
144
|
+
"max": { "value": 320, "unit": "px"}
|
|
145
|
+
},
|
|
146
|
+
"collapse": { "value": 700, "condition": "lessThan", "relative": "parent" }
|
|
121
147
|
}
|
|
122
148
|
]
|
|
123
149
|
},
|
|
@@ -138,23 +164,139 @@
|
|
|
138
164
|
{
|
|
139
165
|
"containerId": "fileTabsContainer",
|
|
140
166
|
"type": "container",
|
|
167
|
+
"size": {
|
|
168
|
+
"initial": { "value": 350, "unit": "px", "type": "fixed" },
|
|
169
|
+
"min": { "value": 51, "unit": "px"}
|
|
170
|
+
},
|
|
171
|
+
"collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"type": "handleBar",
|
|
175
|
+
"sibling1": "fileTabsContainer",
|
|
176
|
+
"sibling2": "leftMenuContainer2"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"containerId": "leftMenuContainer2",
|
|
180
|
+
"type": "container",
|
|
181
|
+
"size": { "initial": { "type": "fill" }}
|
|
182
|
+
}
|
|
183
|
+
]
|
|
184
|
+
},
|
|
185
|
+
"rightMenuContainer": {
|
|
186
|
+
"id": "rightMenuContainer",
|
|
187
|
+
"background": "#252526",
|
|
188
|
+
"type": "split",
|
|
189
|
+
"orientation": "vertical",
|
|
190
|
+
"children": [
|
|
191
|
+
{
|
|
192
|
+
"containerId": "rightMenuContainer1",
|
|
193
|
+
"type": "container",
|
|
194
|
+
"size": {
|
|
195
|
+
"initial": { "value": 200, "unit": "px", "type": "fixed" },
|
|
196
|
+
"min": { "value": 51, "unit": "px"}
|
|
197
|
+
},
|
|
198
|
+
"collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
"type": "handleBar",
|
|
202
|
+
"sibling1": "rightMenuContainer1",
|
|
203
|
+
"sibling2": "rightMenuContainer3"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"containerId": "rightMenuContainer2",
|
|
207
|
+
"type": "container",
|
|
141
208
|
"size": { "initial": { "type": "fill" }}
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"type": "handleBar",
|
|
212
|
+
"sibling1": "rightMenuContainer2",
|
|
213
|
+
"sibling2": "rightMenuContainer3"
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
"containerId": "rightMenuContainer3",
|
|
217
|
+
"type": "container",
|
|
218
|
+
"size": {
|
|
219
|
+
"initial": { "value": 200, "unit": "px", "type": "fixed" },
|
|
220
|
+
"min": { "value": 51, "unit": "px"}
|
|
221
|
+
},
|
|
222
|
+
"collapse": { "value": 500, "condition": "lessThan", "relative": "parent" }
|
|
142
223
|
}
|
|
143
224
|
]
|
|
144
225
|
},
|
|
145
226
|
"fileTabsContainer": {
|
|
146
227
|
"id": "fileTabsContainer",
|
|
147
|
-
"component": "
|
|
228
|
+
"component": "DesignMetadata",
|
|
148
229
|
"menuBar": {
|
|
149
230
|
"showClose": true,
|
|
150
231
|
"closeContainerId": "menuContainer",
|
|
151
|
-
"title": "
|
|
232
|
+
"title": "File Browser"
|
|
152
233
|
},
|
|
153
234
|
"background": "#1e1e1e"
|
|
154
235
|
},
|
|
155
236
|
"editorContainer": {
|
|
156
237
|
"id": "editorContainer",
|
|
157
|
-
"component": "
|
|
238
|
+
"component": "EditorContainer",
|
|
239
|
+
"background": "#1e1e1e"
|
|
240
|
+
},
|
|
241
|
+
"FlowContainer": {
|
|
242
|
+
"id": "FlowContainer",
|
|
243
|
+
"component": "Flow",
|
|
244
|
+
"background": "#1e1e1e"
|
|
245
|
+
},
|
|
246
|
+
"designLayoutContainer": {
|
|
247
|
+
"id": "designLayoutContainer",
|
|
248
|
+
"type": "split",
|
|
249
|
+
"orientation": "horizontal",
|
|
250
|
+
"children": [
|
|
251
|
+
{
|
|
252
|
+
"containerId": "toolbarContainer",
|
|
253
|
+
"type": "container",
|
|
254
|
+
"size": { "initial": { "value": 40, "unit": "px", "type": "fixed" }},
|
|
255
|
+
"collapse": { "value": 100, "condition": "lessThan", "relative": "parent" }
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
"containerId": "FlowContainer",
|
|
259
|
+
"type": "container",
|
|
260
|
+
"size": { "initial": { "type": "fill" }}
|
|
261
|
+
}
|
|
262
|
+
],
|
|
263
|
+
"background": "#1e1e1e"
|
|
264
|
+
},
|
|
265
|
+
"leftMenuContainer2": {
|
|
266
|
+
"id": "leftMenuContainer2",
|
|
267
|
+
"menuBar": {
|
|
268
|
+
"showClose": false,
|
|
269
|
+
"title": "File Browser3"
|
|
270
|
+
},
|
|
271
|
+
"background": "#1e1e1e"
|
|
272
|
+
},
|
|
273
|
+
"rightMenuContainer1": {
|
|
274
|
+
"id": "rightMenuContainer1",
|
|
275
|
+
"menuBar": {
|
|
276
|
+
"showClose": false,
|
|
277
|
+
"title": "Behaviors"
|
|
278
|
+
},
|
|
279
|
+
"background": "#1e1e1e"
|
|
280
|
+
},
|
|
281
|
+
"rightMenuContainer2": {
|
|
282
|
+
"id": "rightMenuContainer2",
|
|
283
|
+
"menuBar": {
|
|
284
|
+
"showClose": false,
|
|
285
|
+
"title": "Participants"
|
|
286
|
+
},
|
|
287
|
+
"background": "#1e1e1e"
|
|
288
|
+
},
|
|
289
|
+
"rightMenuContainer3": {
|
|
290
|
+
"id": "rightMenuContainer3",
|
|
291
|
+
"menuBar": {
|
|
292
|
+
"showClose": false,
|
|
293
|
+
"title": "Invariants"
|
|
294
|
+
},
|
|
295
|
+
"background": "#1e1e1e"
|
|
296
|
+
},
|
|
297
|
+
"toolbarContainer": {
|
|
298
|
+
"id": "toolbarContainer",
|
|
299
|
+
"component": "ToolBar",
|
|
158
300
|
"background": "#1e1e1e"
|
|
159
301
|
}
|
|
160
302
|
}
|