/
boxpanel.ts
206 lines (184 loc) · 5 KB
/
boxpanel.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
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
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2017, PhosphorJS Contributors
|
| Distributed under the terms of the BSD 3-Clause License.
|
| The full license is in the file LICENSE, distributed with this software.
|----------------------------------------------------------------------------*/
import { BoxLayout } from './boxlayout';
import { Panel } from './panel';
import { Widget } from './widget';
/**
* A panel which arranges its widgets in a single row or column.
*
* #### Notes
* This class provides a convenience wrapper around a {@link BoxLayout}.
*/
export class BoxPanel extends Panel {
/**
* Construct a new box panel.
*
* @param options - The options for initializing the box panel.
*/
constructor(options: BoxPanel.IOptions = {}) {
super({ layout: Private.createLayout(options) });
this.addClass('lm-BoxPanel');
}
/**
* Get the layout direction for the box panel.
*/
get direction(): BoxPanel.Direction {
return (this.layout as BoxLayout).direction;
}
/**
* Set the layout direction for the box panel.
*/
set direction(value: BoxPanel.Direction) {
(this.layout as BoxLayout).direction = value;
}
/**
* Get the content alignment for the box panel.
*
* #### Notes
* This is the alignment of the widgets in the layout direction.
*
* The alignment has no effect if the widgets can expand to fill the
* entire box layout.
*/
get alignment(): BoxPanel.Alignment {
return (this.layout as BoxLayout).alignment;
}
/**
* Set the content alignment for the box panel.
*
* #### Notes
* This is the alignment of the widgets in the layout direction.
*
* The alignment has no effect if the widgets can expand to fill the
* entire box layout.
*/
set alignment(value: BoxPanel.Alignment) {
(this.layout as BoxLayout).alignment = value;
}
/**
* Get the inter-element spacing for the box panel.
*/
get spacing(): number {
return (this.layout as BoxLayout).spacing;
}
/**
* Set the inter-element spacing for the box panel.
*/
set spacing(value: number) {
(this.layout as BoxLayout).spacing = value;
}
/**
* A message handler invoked on a `'child-added'` message.
*/
protected onChildAdded(msg: Widget.ChildMessage): void {
msg.child.addClass('lm-BoxPanel-child');
}
/**
* A message handler invoked on a `'child-removed'` message.
*/
protected onChildRemoved(msg: Widget.ChildMessage): void {
msg.child.removeClass('lm-BoxPanel-child');
}
}
/**
* The namespace for the `BoxPanel` class statics.
*/
export namespace BoxPanel {
/**
* A type alias for a box panel direction.
*/
export type Direction = BoxLayout.Direction;
/**
* A type alias for a box panel alignment.
*/
export type Alignment = BoxLayout.Alignment;
/**
* An options object for initializing a box panel.
*/
export interface IOptions {
/**
* The layout direction of the panel.
*
* The default is `'top-to-bottom'`.
*/
direction?: Direction;
/**
* The content alignment of the panel.
*
* The default is `'start'`.
*/
alignment?: Alignment;
/**
* The spacing between items in the panel.
*
* The default is `4`.
*/
spacing?: number;
/**
* The box layout to use for the box panel.
*
* If this is provided, the other options are ignored.
*
* The default is a new `BoxLayout`.
*/
layout?: BoxLayout;
}
/**
* Get the box panel stretch factor for the given widget.
*
* @param widget - The widget of interest.
*
* @returns The box panel stretch factor for the widget.
*/
export function getStretch(widget: Widget): number {
return BoxLayout.getStretch(widget);
}
/**
* Set the box panel stretch factor for the given widget.
*
* @param widget - The widget of interest.
*
* @param value - The value for the stretch factor.
*/
export function setStretch(widget: Widget, value: number): void {
BoxLayout.setStretch(widget, value);
}
/**
* Get the box panel size basis for the given widget.
*
* @param widget - The widget of interest.
*
* @returns The box panel size basis for the widget.
*/
export function getSizeBasis(widget: Widget): number {
return BoxLayout.getSizeBasis(widget);
}
/**
* Set the box panel size basis for the given widget.
*
* @param widget - The widget of interest.
*
* @param value - The value for the size basis.
*/
export function setSizeBasis(widget: Widget, value: number): void {
BoxLayout.setSizeBasis(widget, value);
}
}
/**
* The namespace for the module implementation details.
*/
namespace Private {
/**
* Create a box layout for the given panel options.
*/
export function createLayout(options: BoxPanel.IOptions): BoxLayout {
return options.layout || new BoxLayout(options);
}
}