flexlayout-react 0.7.1 → 0.7.4
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/ChangeLog.txt +12 -0
- package/README.md +33 -34
- package/declarations/view/Icons.d.ts +1 -0
- package/declarations/view/Layout.d.ts +1 -0
- package/dist/flexlayout.js +96 -184
- package/dist/flexlayout_min.js +1 -1
- package/lib/Attribute.js +12 -17
- package/lib/Attribute.js.map +1 -1
- package/lib/AttributeDefinitions.js +44 -53
- package/lib/AttributeDefinitions.js.map +1 -1
- package/lib/DockLocation.js +41 -46
- package/lib/DockLocation.js.map +1 -1
- package/lib/DragDrop.js +55 -60
- package/lib/DragDrop.js.map +1 -1
- package/lib/DropInfo.js +3 -8
- package/lib/DropInfo.js.map +1 -1
- package/lib/I18nLabel.js +2 -5
- package/lib/I18nLabel.js.map +1 -1
- package/lib/Orientation.js +11 -16
- package/lib/Orientation.js.map +1 -1
- package/lib/PopupMenu.js +24 -28
- package/lib/PopupMenu.js.map +1 -1
- package/lib/Rect.js +35 -41
- package/lib/Rect.js.map +1 -1
- package/lib/Types.js +2 -5
- package/lib/Types.js.map +1 -1
- package/lib/index.js +22 -38
- package/lib/index.js.map +1 -1
- package/lib/model/Action.js +3 -8
- package/lib/model/Action.js.map +1 -1
- package/lib/model/Actions.js +68 -75
- package/lib/model/Actions.js.map +1 -1
- package/lib/model/BorderNode.js +189 -206
- package/lib/model/BorderNode.js.map +1 -1
- package/lib/model/BorderSet.js +44 -55
- package/lib/model/BorderSet.js.map +1 -1
- package/lib/model/ICloseType.js +2 -5
- package/lib/model/ICloseType.js.map +1 -1
- package/lib/model/IDraggable.js +1 -2
- package/lib/model/IDropTarget.js +1 -2
- package/lib/model/IJsonModel.js +1 -2
- package/lib/model/Model.js +217 -232
- package/lib/model/Model.js.map +1 -1
- package/lib/model/Node.js +87 -94
- package/lib/model/Node.js.map +1 -1
- package/lib/model/RowNode.js +204 -250
- package/lib/model/RowNode.js.map +1 -1
- package/lib/model/SplitterNode.js +35 -57
- package/lib/model/SplitterNode.js.map +1 -1
- package/lib/model/TabNode.js +100 -124
- package/lib/model/TabNode.js.map +1 -1
- package/lib/model/TabSetNode.js +181 -197
- package/lib/model/TabSetNode.js.map +1 -1
- package/lib/model/Utils.js +20 -26
- package/lib/model/Utils.js.map +1 -1
- package/lib/view/BorderButton.js +45 -49
- package/lib/view/BorderButton.js.map +1 -1
- package/lib/view/BorderTabSet.js +57 -61
- package/lib/view/BorderTabSet.js.map +1 -1
- package/lib/view/ErrorBoundary.js +15 -37
- package/lib/view/ErrorBoundary.js.map +1 -1
- package/lib/view/FloatingWindow.js +43 -56
- package/lib/view/FloatingWindow.js.map +1 -1
- package/lib/view/FloatingWindowTab.js +12 -16
- package/lib/view/FloatingWindowTab.js.map +1 -1
- package/lib/view/Icons.js +17 -25
- package/lib/view/Icons.js.map +1 -1
- package/lib/view/Layout.js +396 -508
- package/lib/view/Layout.js.map +1 -1
- package/lib/view/Splitter.js +53 -57
- package/lib/view/Splitter.js.map +1 -1
- package/lib/view/Tab.js +31 -35
- package/lib/view/Tab.js.map +1 -1
- package/lib/view/TabButton.js +46 -50
- package/lib/view/TabButton.js.map +1 -1
- package/lib/view/TabButtonStamp.js +11 -15
- package/lib/view/TabButtonStamp.js.map +1 -1
- package/lib/view/TabFloating.js +30 -34
- package/lib/view/TabFloating.js.map +1 -1
- package/lib/view/TabOverflowHook.js +46 -50
- package/lib/view/TabOverflowHook.js.map +1 -1
- package/lib/view/TabSet.js +93 -106
- package/lib/view/TabSet.js.map +1 -1
- package/lib/view/Utils.js +11 -17
- package/lib/view/Utils.js.map +1 -1
- package/package.json +5 -3
- package/src/model/BorderNode.ts +6 -1
- package/src/model/TabSetNode.ts +6 -1
- package/src/view/FloatingWindow.tsx +5 -1
- package/src/view/Icons.tsx +7 -7
- package/src/view/Layout.tsx +23 -104
- package/style/dark.css +1 -0
- package/style/dark.css.map +1 -1
- package/style/dark.scss +1 -0
- package/style/gray.css +1 -0
- package/style/gray.css.map +1 -1
- package/style/gray.scss +1 -0
- package/style/light.css +1 -0
- package/style/light.css.map +1 -1
- package/style/light.scss +1 -0
- package/style/underline.css +1 -0
- package/style/underline.css.map +1 -1
- package/style/underline.scss +1 -0
package/lib/model/TabSetNode.js
CHANGED
|
@@ -1,50 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
-
};
|
|
16
|
-
})();
|
|
17
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
18
|
-
exports.TabSetNode = void 0;
|
|
19
|
-
var Attribute_1 = require("../Attribute");
|
|
20
|
-
var AttributeDefinitions_1 = require("../AttributeDefinitions");
|
|
21
|
-
var DockLocation_1 = require("../DockLocation");
|
|
22
|
-
var DropInfo_1 = require("../DropInfo");
|
|
23
|
-
var Orientation_1 = require("../Orientation");
|
|
24
|
-
var Rect_1 = require("../Rect");
|
|
25
|
-
var Types_1 = require("../Types");
|
|
26
|
-
var Node_1 = require("./Node");
|
|
27
|
-
var RowNode_1 = require("./RowNode");
|
|
28
|
-
var TabNode_1 = require("./TabNode");
|
|
29
|
-
var Utils_1 = require("./Utils");
|
|
30
|
-
var TabSetNode = /** @class */ (function (_super) {
|
|
31
|
-
__extends(TabSetNode, _super);
|
|
1
|
+
import { Attribute } from "../Attribute";
|
|
2
|
+
import { AttributeDefinitions } from "../AttributeDefinitions";
|
|
3
|
+
import { DockLocation } from "../DockLocation";
|
|
4
|
+
import { DropInfo } from "../DropInfo";
|
|
5
|
+
import { Orientation } from "../Orientation";
|
|
6
|
+
import { Rect } from "../Rect";
|
|
7
|
+
import { CLASSES } from "../Types";
|
|
8
|
+
import { BorderNode } from "./BorderNode";
|
|
9
|
+
import { Node } from "./Node";
|
|
10
|
+
import { RowNode } from "./RowNode";
|
|
11
|
+
import { TabNode } from "./TabNode";
|
|
12
|
+
import { adjustSelectedIndex } from "./Utils";
|
|
13
|
+
export class TabSetNode extends Node {
|
|
32
14
|
/** @internal */
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
TabSetNode._attributeDefinitions.fromJson(json,
|
|
36
|
-
model._addNode(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
return _this;
|
|
15
|
+
constructor(model, json) {
|
|
16
|
+
super(model);
|
|
17
|
+
TabSetNode._attributeDefinitions.fromJson(json, this._attributes);
|
|
18
|
+
model._addNode(this);
|
|
19
|
+
this._calculatedTabBarHeight = 0;
|
|
20
|
+
this._calculatedHeaderBarHeight = 0;
|
|
40
21
|
}
|
|
41
22
|
/** @internal */
|
|
42
|
-
|
|
43
|
-
|
|
23
|
+
static _fromJson(json, model) {
|
|
24
|
+
const newLayoutNode = new TabSetNode(model, json);
|
|
44
25
|
if (json.children != null) {
|
|
45
|
-
for (
|
|
46
|
-
|
|
47
|
-
var child = TabNode_1.TabNode._fromJson(jsonChild, model);
|
|
26
|
+
for (const jsonChild of json.children) {
|
|
27
|
+
const child = TabNode._fromJson(jsonChild, model);
|
|
48
28
|
newLayoutNode._addChild(child);
|
|
49
29
|
}
|
|
50
30
|
}
|
|
@@ -58,17 +38,17 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
58
38
|
model._setActiveTabset(newLayoutNode);
|
|
59
39
|
}
|
|
60
40
|
return newLayoutNode;
|
|
61
|
-
}
|
|
41
|
+
}
|
|
62
42
|
/** @internal */
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
attributeDefinitions.add("type", TabSetNode.TYPE, true).setType(
|
|
66
|
-
attributeDefinitions.add("id", undefined).setType(
|
|
67
|
-
attributeDefinitions.add("weight", 100).setType(
|
|
68
|
-
attributeDefinitions.add("width", undefined).setType(
|
|
69
|
-
attributeDefinitions.add("height", undefined).setType(
|
|
70
|
-
attributeDefinitions.add("selected", 0).setType(
|
|
71
|
-
attributeDefinitions.add("name", undefined).setType(
|
|
43
|
+
static _createAttributeDefinitions() {
|
|
44
|
+
const attributeDefinitions = new AttributeDefinitions();
|
|
45
|
+
attributeDefinitions.add("type", TabSetNode.TYPE, true).setType(Attribute.STRING).setFixed();
|
|
46
|
+
attributeDefinitions.add("id", undefined).setType(Attribute.STRING);
|
|
47
|
+
attributeDefinitions.add("weight", 100).setType(Attribute.NUMBER);
|
|
48
|
+
attributeDefinitions.add("width", undefined).setType(Attribute.NUMBER);
|
|
49
|
+
attributeDefinitions.add("height", undefined).setType(Attribute.NUMBER);
|
|
50
|
+
attributeDefinitions.add("selected", 0).setType(Attribute.NUMBER);
|
|
51
|
+
attributeDefinitions.add("name", undefined).setType(Attribute.STRING);
|
|
72
52
|
attributeDefinitions.add("config", undefined).setType("any");
|
|
73
53
|
attributeDefinitions.addInherited("enableDeleteWhenEmpty", "tabSetEnableDeleteWhenEmpty");
|
|
74
54
|
attributeDefinitions.addInherited("enableDrop", "tabSetEnableDrop");
|
|
@@ -86,50 +66,50 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
86
66
|
attributeDefinitions.addInherited("headerHeight", "tabSetHeaderHeight");
|
|
87
67
|
attributeDefinitions.addInherited("tabStripHeight", "tabSetTabStripHeight");
|
|
88
68
|
attributeDefinitions.addInherited("tabLocation", "tabSetTabLocation");
|
|
89
|
-
attributeDefinitions.addInherited("autoSelectTab", "tabSetAutoSelectTab").setType(
|
|
69
|
+
attributeDefinitions.addInherited("autoSelectTab", "tabSetAutoSelectTab").setType(Attribute.BOOLEAN);
|
|
90
70
|
return attributeDefinitions;
|
|
91
|
-
}
|
|
92
|
-
|
|
71
|
+
}
|
|
72
|
+
getName() {
|
|
93
73
|
return this._getAttr("name");
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
|
|
74
|
+
}
|
|
75
|
+
getSelected() {
|
|
76
|
+
const selected = this._attributes.selected;
|
|
97
77
|
if (selected !== undefined) {
|
|
98
78
|
return selected;
|
|
99
79
|
}
|
|
100
80
|
return -1;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
|
|
81
|
+
}
|
|
82
|
+
getSelectedNode() {
|
|
83
|
+
const selected = this.getSelected();
|
|
104
84
|
if (selected !== -1) {
|
|
105
85
|
return this._children[selected];
|
|
106
86
|
}
|
|
107
87
|
return undefined;
|
|
108
|
-
}
|
|
109
|
-
|
|
88
|
+
}
|
|
89
|
+
getWeight() {
|
|
110
90
|
return this._getAttr("weight");
|
|
111
|
-
}
|
|
112
|
-
|
|
91
|
+
}
|
|
92
|
+
getWidth() {
|
|
113
93
|
return this._getAttr("width");
|
|
114
|
-
}
|
|
115
|
-
|
|
94
|
+
}
|
|
95
|
+
getMinWidth() {
|
|
116
96
|
return this._getAttr("minWidth");
|
|
117
|
-
}
|
|
118
|
-
|
|
97
|
+
}
|
|
98
|
+
getHeight() {
|
|
119
99
|
return this._getAttr("height");
|
|
120
|
-
}
|
|
121
|
-
|
|
100
|
+
}
|
|
101
|
+
getMinHeight() {
|
|
122
102
|
return this._getAttr("minHeight");
|
|
123
|
-
}
|
|
103
|
+
}
|
|
124
104
|
/** @internal */
|
|
125
|
-
|
|
126
|
-
if (orientation ===
|
|
105
|
+
getMinSize(orientation) {
|
|
106
|
+
if (orientation === Orientation.HORZ) {
|
|
127
107
|
return this.getMinWidth();
|
|
128
108
|
}
|
|
129
109
|
else {
|
|
130
110
|
return this.getMinHeight();
|
|
131
111
|
}
|
|
132
|
-
}
|
|
112
|
+
}
|
|
133
113
|
/**
|
|
134
114
|
* Returns the config attribute that can be used to store node specific data that
|
|
135
115
|
* WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather
|
|
@@ -137,34 +117,34 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
137
117
|
* this.state.model.doAction(
|
|
138
118
|
* FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));
|
|
139
119
|
*/
|
|
140
|
-
|
|
120
|
+
getConfig() {
|
|
141
121
|
return this._attributes.config;
|
|
142
|
-
}
|
|
143
|
-
|
|
122
|
+
}
|
|
123
|
+
isMaximized() {
|
|
144
124
|
return this._model.getMaximizedTabset() === this;
|
|
145
|
-
}
|
|
146
|
-
|
|
125
|
+
}
|
|
126
|
+
isActive() {
|
|
147
127
|
return this._model.getActiveTabset() === this;
|
|
148
|
-
}
|
|
149
|
-
|
|
128
|
+
}
|
|
129
|
+
isEnableDeleteWhenEmpty() {
|
|
150
130
|
return this._getAttr("enableDeleteWhenEmpty");
|
|
151
|
-
}
|
|
152
|
-
|
|
131
|
+
}
|
|
132
|
+
isEnableDrop() {
|
|
153
133
|
return this._getAttr("enableDrop");
|
|
154
|
-
}
|
|
155
|
-
|
|
134
|
+
}
|
|
135
|
+
isEnableDrag() {
|
|
156
136
|
return this._getAttr("enableDrag");
|
|
157
|
-
}
|
|
158
|
-
|
|
137
|
+
}
|
|
138
|
+
isEnableDivide() {
|
|
159
139
|
return this._getAttr("enableDivide");
|
|
160
|
-
}
|
|
161
|
-
|
|
140
|
+
}
|
|
141
|
+
isEnableMaximize() {
|
|
162
142
|
return this._getAttr("enableMaximize");
|
|
163
|
-
}
|
|
164
|
-
|
|
143
|
+
}
|
|
144
|
+
isEnableClose() {
|
|
165
145
|
return this._getAttr("enableClose");
|
|
166
|
-
}
|
|
167
|
-
|
|
146
|
+
}
|
|
147
|
+
canMaximize() {
|
|
168
148
|
if (this.isEnableMaximize()) {
|
|
169
149
|
// always allow maximize toggle if already maximized
|
|
170
150
|
if (this.getModel().getMaximizedTabset() === this) {
|
|
@@ -177,22 +157,22 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
177
157
|
return true;
|
|
178
158
|
}
|
|
179
159
|
return false;
|
|
180
|
-
}
|
|
181
|
-
|
|
160
|
+
}
|
|
161
|
+
isEnableTabStrip() {
|
|
182
162
|
return this._getAttr("enableTabStrip");
|
|
183
|
-
}
|
|
184
|
-
|
|
163
|
+
}
|
|
164
|
+
isAutoSelectTab() {
|
|
185
165
|
return this._getAttr("autoSelectTab");
|
|
186
|
-
}
|
|
187
|
-
|
|
166
|
+
}
|
|
167
|
+
getClassNameTabStrip() {
|
|
188
168
|
return this._getAttr("classNameTabStrip");
|
|
189
|
-
}
|
|
190
|
-
|
|
169
|
+
}
|
|
170
|
+
getClassNameHeader() {
|
|
191
171
|
return this._getAttr("classNameHeader");
|
|
192
|
-
}
|
|
172
|
+
}
|
|
193
173
|
/** @internal */
|
|
194
|
-
|
|
195
|
-
|
|
174
|
+
calculateHeaderBarHeight(metrics) {
|
|
175
|
+
const headerBarHeight = this._getAttr("headerHeight");
|
|
196
176
|
if (headerBarHeight !== 0) {
|
|
197
177
|
// its defined
|
|
198
178
|
this._calculatedHeaderBarHeight = headerBarHeight;
|
|
@@ -200,10 +180,10 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
200
180
|
else {
|
|
201
181
|
this._calculatedHeaderBarHeight = metrics.headerBarSize;
|
|
202
182
|
}
|
|
203
|
-
}
|
|
183
|
+
}
|
|
204
184
|
/** @internal */
|
|
205
|
-
|
|
206
|
-
|
|
185
|
+
calculateTabBarHeight(metrics) {
|
|
186
|
+
const tabBarHeight = this._getAttr("tabStripHeight");
|
|
207
187
|
if (tabBarHeight !== 0) {
|
|
208
188
|
// its defined
|
|
209
189
|
this._calculatedTabBarHeight = tabBarHeight;
|
|
@@ -211,44 +191,44 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
211
191
|
else {
|
|
212
192
|
this._calculatedTabBarHeight = metrics.tabBarSize;
|
|
213
193
|
}
|
|
214
|
-
}
|
|
215
|
-
|
|
194
|
+
}
|
|
195
|
+
getHeaderHeight() {
|
|
216
196
|
return this._calculatedHeaderBarHeight;
|
|
217
|
-
}
|
|
218
|
-
|
|
197
|
+
}
|
|
198
|
+
getTabStripHeight() {
|
|
219
199
|
return this._calculatedTabBarHeight;
|
|
220
|
-
}
|
|
221
|
-
|
|
200
|
+
}
|
|
201
|
+
getTabLocation() {
|
|
222
202
|
return this._getAttr("tabLocation");
|
|
223
|
-
}
|
|
203
|
+
}
|
|
224
204
|
/** @internal */
|
|
225
|
-
|
|
205
|
+
_setWeight(weight) {
|
|
226
206
|
this._attributes.weight = weight;
|
|
227
|
-
}
|
|
207
|
+
}
|
|
228
208
|
/** @internal */
|
|
229
|
-
|
|
209
|
+
_setSelected(index) {
|
|
230
210
|
this._attributes.selected = index;
|
|
231
|
-
}
|
|
211
|
+
}
|
|
232
212
|
/** @internal */
|
|
233
|
-
|
|
234
|
-
|
|
213
|
+
canDrop(dragNode, x, y) {
|
|
214
|
+
let dropInfo;
|
|
235
215
|
if (dragNode === this) {
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
dropInfo = new
|
|
216
|
+
const dockLocation = DockLocation.CENTER;
|
|
217
|
+
const outlineRect = this._tabHeaderRect;
|
|
218
|
+
dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
|
|
239
219
|
}
|
|
240
220
|
else if (this._contentRect.contains(x, y)) {
|
|
241
|
-
|
|
221
|
+
let dockLocation = DockLocation.CENTER;
|
|
242
222
|
if (this._model.getMaximizedTabset() === undefined) {
|
|
243
|
-
dockLocation =
|
|
223
|
+
dockLocation = DockLocation.getLocation(this._contentRect, x, y);
|
|
244
224
|
}
|
|
245
|
-
|
|
246
|
-
dropInfo = new
|
|
225
|
+
const outlineRect = dockLocation.getDockRect(this._rect);
|
|
226
|
+
dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
|
|
247
227
|
}
|
|
248
228
|
else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
229
|
+
let r;
|
|
230
|
+
let yy;
|
|
231
|
+
let h;
|
|
252
232
|
if (this._children.length === 0) {
|
|
253
233
|
r = this._tabHeaderRect.clone();
|
|
254
234
|
yy = r.y + 3;
|
|
@@ -256,38 +236,38 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
256
236
|
r.width = 2;
|
|
257
237
|
}
|
|
258
238
|
else {
|
|
259
|
-
|
|
239
|
+
let child = this._children[0];
|
|
260
240
|
r = child.getTabRect();
|
|
261
241
|
yy = r.y;
|
|
262
242
|
h = r.height;
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
for (
|
|
243
|
+
let p = this._tabHeaderRect.x;
|
|
244
|
+
let childCenter = 0;
|
|
245
|
+
for (let i = 0; i < this._children.length; i++) {
|
|
266
246
|
child = this._children[i];
|
|
267
247
|
r = child.getTabRect();
|
|
268
248
|
childCenter = r.x + r.width / 2;
|
|
269
249
|
if (x >= p && x < childCenter) {
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
dropInfo = new
|
|
250
|
+
const dockLocation = DockLocation.CENTER;
|
|
251
|
+
const outlineRect = new Rect(r.x - 2, yy, 3, h);
|
|
252
|
+
dropInfo = new DropInfo(this, outlineRect, dockLocation, i, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
|
|
273
253
|
break;
|
|
274
254
|
}
|
|
275
255
|
p = childCenter;
|
|
276
256
|
}
|
|
277
257
|
}
|
|
278
258
|
if (dropInfo == null) {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
dropInfo = new
|
|
259
|
+
const dockLocation = DockLocation.CENTER;
|
|
260
|
+
const outlineRect = new Rect(r.getRight() - 2, yy, 3, h);
|
|
261
|
+
dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, CLASSES.FLEXLAYOUT__OUTLINE_RECT);
|
|
282
262
|
}
|
|
283
263
|
}
|
|
284
264
|
if (!dragNode._canDockInto(dragNode, dropInfo)) {
|
|
285
265
|
return undefined;
|
|
286
266
|
}
|
|
287
267
|
return dropInfo;
|
|
288
|
-
}
|
|
268
|
+
}
|
|
289
269
|
/** @internal */
|
|
290
|
-
|
|
270
|
+
_layout(rect, metrics) {
|
|
291
271
|
this.calculateHeaderBarHeight(metrics);
|
|
292
272
|
this.calculateTabBarHeight(metrics);
|
|
293
273
|
if (this.isMaximized()) {
|
|
@@ -296,66 +276,72 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
296
276
|
rect = rect.removeInsets(this._getAttr("marginInsets"));
|
|
297
277
|
this._rect = rect;
|
|
298
278
|
rect = rect.removeInsets(this._getAttr("borderInsets"));
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
279
|
+
const showHeader = this.getName() !== undefined;
|
|
280
|
+
let y = 0;
|
|
281
|
+
let h = 0;
|
|
302
282
|
if (showHeader) {
|
|
303
283
|
y += this._calculatedHeaderBarHeight;
|
|
304
284
|
h += this._calculatedHeaderBarHeight;
|
|
305
285
|
}
|
|
306
286
|
if (this.isEnableTabStrip()) {
|
|
307
287
|
if (this.getTabLocation() === "top") {
|
|
308
|
-
this._tabHeaderRect = new
|
|
288
|
+
this._tabHeaderRect = new Rect(rect.x, rect.y + y, rect.width, this._calculatedTabBarHeight);
|
|
309
289
|
}
|
|
310
290
|
else {
|
|
311
|
-
this._tabHeaderRect = new
|
|
291
|
+
this._tabHeaderRect = new Rect(rect.x, rect.y + rect.height - this._calculatedTabBarHeight, rect.width, this._calculatedTabBarHeight);
|
|
312
292
|
}
|
|
313
293
|
h += this._calculatedTabBarHeight;
|
|
314
294
|
if (this.getTabLocation() === "top") {
|
|
315
295
|
y += this._calculatedTabBarHeight;
|
|
316
296
|
}
|
|
317
297
|
}
|
|
318
|
-
this._contentRect = new
|
|
319
|
-
for (
|
|
320
|
-
|
|
298
|
+
this._contentRect = new Rect(rect.x, rect.y + y, rect.width, rect.height - h);
|
|
299
|
+
for (let i = 0; i < this._children.length; i++) {
|
|
300
|
+
const child = this._children[i];
|
|
321
301
|
child._layout(this._contentRect, metrics);
|
|
322
302
|
child._setVisible(i === this.getSelected());
|
|
323
303
|
}
|
|
324
|
-
}
|
|
304
|
+
}
|
|
325
305
|
/** @internal */
|
|
326
|
-
|
|
306
|
+
_delete() {
|
|
327
307
|
this._parent._removeChild(this);
|
|
328
|
-
}
|
|
308
|
+
}
|
|
329
309
|
/** @internal */
|
|
330
|
-
|
|
331
|
-
|
|
310
|
+
_remove(node) {
|
|
311
|
+
const removedIndex = this._removeChild(node);
|
|
332
312
|
this._model._tidy();
|
|
333
|
-
|
|
334
|
-
}
|
|
313
|
+
adjustSelectedIndex(this, removedIndex);
|
|
314
|
+
}
|
|
335
315
|
/** @internal */
|
|
336
|
-
|
|
337
|
-
|
|
316
|
+
drop(dragNode, location, index, select) {
|
|
317
|
+
const dockLocation = location;
|
|
338
318
|
if (this === dragNode) {
|
|
339
319
|
// tabset drop into itself
|
|
340
320
|
return; // dock back to itself
|
|
341
321
|
}
|
|
342
|
-
|
|
343
|
-
|
|
322
|
+
let dragParent = dragNode.getParent();
|
|
323
|
+
let fromIndex = 0;
|
|
344
324
|
if (dragParent !== undefined) {
|
|
345
325
|
fromIndex = dragParent._removeChild(dragNode);
|
|
346
|
-
|
|
326
|
+
// if selected node in border is being docked into tabset then deselect border tabs
|
|
327
|
+
if (dragParent instanceof BorderNode && dragParent.getSelected() === fromIndex) {
|
|
328
|
+
dragParent._setSelected(-1);
|
|
329
|
+
}
|
|
330
|
+
else {
|
|
331
|
+
adjustSelectedIndex(dragParent, fromIndex);
|
|
332
|
+
}
|
|
347
333
|
}
|
|
348
334
|
// if dropping a tab back to same tabset and moving to forward position then reduce insertion index
|
|
349
|
-
if (dragNode.getType() ===
|
|
335
|
+
if (dragNode.getType() === TabNode.TYPE && dragParent === this && fromIndex < index && index > 0) {
|
|
350
336
|
index--;
|
|
351
337
|
}
|
|
352
338
|
// simple_bundled dock to existing tabset
|
|
353
|
-
if (dockLocation ===
|
|
354
|
-
|
|
339
|
+
if (dockLocation === DockLocation.CENTER) {
|
|
340
|
+
let insertPos = index;
|
|
355
341
|
if (insertPos === -1) {
|
|
356
342
|
insertPos = this._children.length;
|
|
357
343
|
}
|
|
358
|
-
if (dragNode.getType() ===
|
|
344
|
+
if (dragNode.getType() === TabNode.TYPE) {
|
|
359
345
|
this._addChild(dragNode, insertPos);
|
|
360
346
|
if (select || (select !== false && this.isAutoSelectTab())) {
|
|
361
347
|
this._setSelected(insertPos);
|
|
@@ -363,8 +349,8 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
363
349
|
// console.log("added child at : " + insertPos);
|
|
364
350
|
}
|
|
365
351
|
else {
|
|
366
|
-
for (
|
|
367
|
-
|
|
352
|
+
for (let i = 0; i < dragNode.getChildren().length; i++) {
|
|
353
|
+
const child = dragNode.getChildren()[i];
|
|
368
354
|
this._addChild(child, insertPos);
|
|
369
355
|
// console.log("added child at : " + insertPos);
|
|
370
356
|
insertPos++;
|
|
@@ -373,11 +359,11 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
373
359
|
this._model._setActiveTabset(this);
|
|
374
360
|
}
|
|
375
361
|
else {
|
|
376
|
-
|
|
377
|
-
if (dragNode instanceof
|
|
362
|
+
let tabSet;
|
|
363
|
+
if (dragNode instanceof TabNode) {
|
|
378
364
|
// create new tabset parent
|
|
379
365
|
// console.log("create a new tabset");
|
|
380
|
-
|
|
366
|
+
const callback = this._model._getOnCreateTabSet();
|
|
381
367
|
tabSet = new TabSetNode(this._model, callback ? callback(dragNode) : {});
|
|
382
368
|
tabSet._addChild(dragNode);
|
|
383
369
|
// console.log("added child at end");
|
|
@@ -386,8 +372,8 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
386
372
|
else {
|
|
387
373
|
tabSet = dragNode;
|
|
388
374
|
}
|
|
389
|
-
|
|
390
|
-
|
|
375
|
+
const parentRow = this._parent;
|
|
376
|
+
const pos = parentRow.getChildren().indexOf(this);
|
|
391
377
|
if (parentRow.getOrientation() === dockLocation._orientation) {
|
|
392
378
|
tabSet._setWeight(this.getWeight() / 2);
|
|
393
379
|
this._setWeight(this.getWeight() / 2);
|
|
@@ -397,7 +383,7 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
397
383
|
else {
|
|
398
384
|
// create a new row to host the new tabset (it will go in the opposite direction)
|
|
399
385
|
// console.log("create a new row");
|
|
400
|
-
|
|
386
|
+
const newRow = new RowNode(this._model, {});
|
|
401
387
|
newRow._setWeight(this.getWeight());
|
|
402
388
|
newRow._addChild(this);
|
|
403
389
|
this._setWeight(50);
|
|
@@ -410,11 +396,11 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
410
396
|
this._model._setActiveTabset(tabSet);
|
|
411
397
|
}
|
|
412
398
|
this._model._tidy();
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
|
|
399
|
+
}
|
|
400
|
+
toJson() {
|
|
401
|
+
const json = {};
|
|
416
402
|
TabSetNode._attributeDefinitions.toJson(json, this._attributes);
|
|
417
|
-
json.children = this._children.map(
|
|
403
|
+
json.children = this._children.map((child) => child.toJson());
|
|
418
404
|
if (this.isActive()) {
|
|
419
405
|
json.active = true;
|
|
420
406
|
}
|
|
@@ -422,31 +408,29 @@ var TabSetNode = /** @class */ (function (_super) {
|
|
|
422
408
|
json.maximized = true;
|
|
423
409
|
}
|
|
424
410
|
return json;
|
|
425
|
-
}
|
|
411
|
+
}
|
|
426
412
|
/** @internal */
|
|
427
|
-
|
|
413
|
+
_updateAttrs(json) {
|
|
428
414
|
TabSetNode._attributeDefinitions.update(json, this._attributes);
|
|
429
|
-
}
|
|
415
|
+
}
|
|
430
416
|
/** @internal */
|
|
431
|
-
|
|
417
|
+
_getAttributeDefinitions() {
|
|
432
418
|
return TabSetNode._attributeDefinitions;
|
|
433
|
-
}
|
|
419
|
+
}
|
|
434
420
|
/** @internal */
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
if (orientation ===
|
|
421
|
+
_getPrefSize(orientation) {
|
|
422
|
+
let prefSize = this.getWidth();
|
|
423
|
+
if (orientation === Orientation.VERT) {
|
|
438
424
|
prefSize = this.getHeight();
|
|
439
425
|
}
|
|
440
426
|
return prefSize;
|
|
441
|
-
}
|
|
427
|
+
}
|
|
442
428
|
/** @internal */
|
|
443
|
-
|
|
429
|
+
static getAttributeDefinitions() {
|
|
444
430
|
return TabSetNode._attributeDefinitions;
|
|
445
|
-
}
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
}(Node_1.Node));
|
|
451
|
-
exports.TabSetNode = TabSetNode;
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
TabSetNode.TYPE = "tabset";
|
|
434
|
+
/** @internal */
|
|
435
|
+
TabSetNode._attributeDefinitions = TabSetNode._createAttributeDefinitions();
|
|
452
436
|
//# sourceMappingURL=TabSetNode.js.map
|