Skip to content

Commit 192803e

Browse files
benderabendera
committed
Fix nested split layouts
1 parent f0f8cba commit 192803e

3 files changed

Lines changed: 104 additions & 56 deletions

File tree

‎dev/vscode-split-layout.html‎

Lines changed: 46 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,9 @@
1212
<script type="module" src="../dist/vscode-scrollable/index.js"></script>
1313
<style>
1414
.split-layout-example {
15-
border: 1px solid var(--vscode-editorWidget-border);
1615
height: 250px;
1716
width: 500px;
1817
}
19-
20-
.split-layout-content {
21-
height: 100%;
22-
/* overflow-y: auto; */
23-
}
24-
25-
.split-layout-content.start {
26-
border-bottom: 1px solid var(--vscode-editorWidget-border);
27-
box-sizing: border-box;
28-
}
29-
30-
.split-layout-nested-example {
31-
height: 100%;
32-
width: 100%;
33-
}
34-
35-
.split-layout-nested-content {
36-
height: 100%;
37-
}
3818
</style>
3919
</head>
4020

@@ -43,7 +23,7 @@
4323
<h2 class="story-title">Basic example</h2>
4424
<div class="story-content">
4525
<component-preview>
46-
<vscode-split-layout class="split-layout-example" initial-position="25%" split="horizontal">
26+
<vscode-split-layout class="split-layout-example" initial-position="25%" split="horizontal" handle-size="10">
4727
<div slot="start" class="split-layout-content start">
4828
<vscode-scrollable style="width: 100%; height: 100%;">
4929
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
@@ -55,6 +35,15 @@ <h2 class="story-title">Basic example</h2>
5535
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
5636
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
5737
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
38+
ultricies sapien porttitor nec. Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
39+
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
40+
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
41+
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
42+
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
43+
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
44+
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
45+
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
46+
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
5847
ultricies sapien porttitor nec.
5948
</vscode-scrollable>
6049
</div>
@@ -69,6 +58,15 @@ <h2 class="story-title">Basic example</h2>
6958
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
7059
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
7160
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
61+
ultricies sapien porttitor nec. Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
62+
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
63+
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
64+
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
65+
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
66+
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
67+
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
68+
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
69+
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
7270
ultricies sapien porttitor nec.
7371
</vscode-scrollable>
7472
</div>
@@ -82,7 +80,7 @@ <h2 class="story-title">Basic example</h2>
8280
<div class="story-content">
8381
<component-preview>
8482
<vscode-split-layout class="split-layout-example">
85-
<div slot="start" class="split-layout-content start">
83+
<div slot="start">
8684
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
8785
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
8886
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
@@ -94,34 +92,32 @@ <h2 class="story-title">Basic example</h2>
9492
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
9593
ultricies sapien porttitor nec.
9694
</div>
97-
<div slot="end" class="split-layout-content">
98-
<vscode-split-layout split="horizontal" class="split-layout-nested-example">
99-
<div slot="start" class="split-layout-nested-content start">
100-
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae.
101-
Phasellus vestibulum pellentesque ligula malesuada sollicitudin. Vivamus
102-
vitae erat eget nulla laoreet porttitor. Nullam sit amet leo et velit
103-
molestie maximus. Vestibulum arcu leo, tempor nec pretium id, vehicula
104-
id odio. Etiam ultricies ligula dolor, in tincidunt nunc maximus at.
105-
Curabitur tincidunt nulla in magna pharetra commodo. Donec vestibulum
106-
mollis quam, ut consequat dolor finibus ac. Nulla suscipit ac sem non
107-
fringilla. Nullam eros ante, suscipit hendrerit molestie a, tempor nec
108-
turpis. Morbi eget erat suscipit, blandit nibh nec, molestie augue.
109-
Aenean consectetur dapibus mauris, eget ultricies sapien porttitor nec.
110-
</div>
111-
<div slot="end" class="split-layout-nested-content">
112-
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae.
113-
Phasellus vestibulum pellentesque ligula malesuada sollicitudin. Vivamus
114-
vitae erat eget nulla laoreet porttitor. Nullam sit amet leo et velit
115-
molestie maximus. Vestibulum arcu leo, tempor nec pretium id, vehicula
116-
id odio. Etiam ultricies ligula dolor, in tincidunt nunc maximus at.
117-
Curabitur tincidunt nulla in magna pharetra commodo. Donec vestibulum
118-
mollis quam, ut consequat dolor finibus ac. Nulla suscipit ac sem non
119-
fringilla. Nullam eros ante, suscipit hendrerit molestie a, tempor nec
120-
turpis. Morbi eget erat suscipit, blandit nibh nec, molestie augue.
121-
Aenean consectetur dapibus mauris, eget ultricies sapien porttitor nec.
122-
</div>
123-
</vscode-split-layout>
124-
</div>
95+
<vscode-split-layout style="height: 100%;" split="horizontal" slot="end">
96+
<div slot="start">
97+
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
98+
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
99+
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
100+
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
101+
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
102+
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
103+
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
104+
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
105+
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
106+
ultricies sapien porttitor nec.
107+
</div>
108+
<div slot="end">
109+
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
110+
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
111+
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
112+
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
113+
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
114+
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
115+
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
116+
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
117+
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
118+
ultricies sapien porttitor nec.
119+
</div>
120+
</vscode-split-layout>
125121
</vscode-split-layout>
126122
</component-preview>
127123
</div>

‎src/vscode-split-layout/vscode-split-layout.styles.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,42 @@ const styles: CSSResultGroup = [
55
defaultStyles,
66
css`
77
:host {
8+
--separator-border: var(--vscode-editorWidget-border, transparent);
9+
10+
border: 1px solid var(--vscode-editorWidget-border);
811
display: block;
912
overflow: hidden;
1013
position: relative;
1114
}
1215
16+
::slotted(*) {
17+
height: 100%;
18+
width: 100%;
19+
}
20+
21+
::slotted(vscode-split-layout) {
22+
border: 0;
23+
}
24+
1325
.start {
26+
box-sizing: border-box;
1427
left: 0;
1528
top: 0;
1629
overflow: hidden;
1730
position: absolute;
1831
}
1932
33+
:host([split='vertical']) .start {
34+
border-right: 1px solid var(--separator-border);
35+
}
36+
37+
:host([split='horizontal']) .start {
38+
border-bottom: 1px solid var(--separator-border);
39+
}
40+
2041
.end {
2142
bottom: 0;
43+
box-sizing: border-box;
2244
overflow: hidden;
2345
position: absolute;
2446
right: 0;

‎src/vscode-split-layout/vscode-split-layout.ts‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import {html, TemplateResult} from 'lit';
2-
import {customElement, property, state} from 'lit/decorators.js';
2+
import {
3+
customElement,
4+
property,
5+
queryAssignedElements,
6+
state,
7+
} from 'lit/decorators.js';
38
import {classMap} from 'lit/directives/class-map.js';
49
import {styleMap} from 'lit/directives/style-map.js';
510
import {VscElement} from '../includes/VscElement.js';
@@ -12,7 +17,7 @@ import styles from './vscode-split-layout.styles.js';
1217
export class VscodeSplitLayout extends VscElement {
1318
static styles = styles;
1419

15-
@property()
20+
@property({reflect: true})
1621
split: 'horizontal' | 'vertical' = 'vertical';
1722

1823
@property({type: Boolean, reflect: true, attribute: 'reset-on-dbl-click'})
@@ -24,7 +29,7 @@ export class VscodeSplitLayout extends VscElement {
2429
@property({type: Number, reflect: true, attribute: 'handle-size'})
2530
handleSize = 4;
2631

27-
@property({attribute: 'initial-position'})
32+
@property({reflect: true, attribute: 'initial-position'})
2833
initialPosition = '50%';
2934

3035
@state()
@@ -54,18 +59,28 @@ export class VscodeSplitLayout extends VscElement {
5459
@state()
5560
private _hide = false;
5661

62+
@queryAssignedElements({slot: 'start', selector: 'vscode-split-layout'})
63+
private _nestedLayoutsAtStart!: HTMLElement[];
64+
65+
@queryAssignedElements({slot: 'end', selector: 'vscode-split-layout'})
66+
private _nestedLayoutsAtEnd!: HTMLElement[];
67+
5768
private _boundRect: DOMRect = new DOMRect();
5869
private _handleOffset = 0;
5970

6071
connectedCallback(): void {
6172
super.connectedCallback();
6273

63-
this._boundRect = this.getBoundingClientRect();
74+
this._initPosition();
75+
}
6476

77+
/** @internal */
78+
initializeResizeHandler() {
6579
this._initPosition();
6680
}
6781

6882
private _initPosition() {
83+
this._boundRect = this.getBoundingClientRect();
6984
const {height, width} = this._boundRect;
7085
const maxPos = this.split === 'vertical' ? width : height;
7186
const matches = /(^[0-9.]+)(%{0,1})$/.exec(this.initialPosition);
@@ -112,6 +127,8 @@ export class VscodeSplitLayout extends VscElement {
112127
private _handleMouseDown(event: MouseEvent) {
113128
event.stopPropagation();
114129
event.preventDefault();
130+
131+
this._boundRect = this.getBoundingClientRect();
115132
const {left, top, width, height} = this._boundRect;
116133

117134
const mouseXLocal = ((event.clientX - left) / width) * 100;
@@ -183,6 +200,19 @@ export class VscodeSplitLayout extends VscElement {
183200
this._initPosition();
184201
}
185202

203+
private _handleSlotChange() {
204+
const nestedLayouts = [
205+
...this._nestedLayoutsAtStart,
206+
...this._nestedLayoutsAtEnd,
207+
];
208+
209+
nestedLayouts.forEach((e) => {
210+
if (e instanceof VscodeSplitLayout) {
211+
e.initializeResizeHandler();
212+
}
213+
});
214+
}
215+
186216
render(): TemplateResult {
187217
const startPaneStyles = styleMap({
188218
bottom: `${this._startPaneBottom}%`,
@@ -228,10 +258,10 @@ export class VscodeSplitLayout extends VscElement {
228258

229259
return html`
230260
<div class="start" style="${startPaneStyles}">
231-
<slot name="start"></slot>
261+
<slot name="start" @slotchange=${this._handleSlotChange}></slot>
232262
</div>
233263
<div class="end" style="${endPaneStyles}">
234-
<slot name="end"></slot>
264+
<slot name="end" @slotchange=${this._handleSlotChange}></slot>
235265
</div>
236266
<div class="${handleOverlayClasses}"></div>
237267
<div

0 commit comments

Comments
 (0)