Skip to content

Commit

Permalink
Fix nested split layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@bendera
bendera committed Nov 24, 2023
1 parent f0f8cba commit 192803e
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 56 deletions.
96 changes: 46 additions & 50 deletions dev/vscode-split-layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,29 +12,9 @@
<script type="module" src="../dist/vscode-scrollable/index.js"></script>
<style>
.split-layout-example {
border: 1px solid var(--vscode-editorWidget-border);
height: 250px;
width: 500px;
}

.split-layout-content {
height: 100%;
/* overflow-y: auto; */
}

.split-layout-content.start {
border-bottom: 1px solid var(--vscode-editorWidget-border);
box-sizing: border-box;
}

.split-layout-nested-example {
height: 100%;
width: 100%;
}

.split-layout-nested-content {
height: 100%;
}
</style>
</head>

Expand All @@ -43,7 +23,7 @@
<h2 class="story-title">Basic example</h2>
<div class="story-content">
<component-preview>
<vscode-split-layout class="split-layout-example" initial-position="25%" split="horizontal">
<vscode-split-layout class="split-layout-example" initial-position="25%" split="horizontal" handle-size="10">
<div slot="start" class="split-layout-content start">
<vscode-scrollable style="width: 100%; height: 100%;">
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
Expand All @@ -55,6 +35,15 @@ <h2 class="story-title">Basic example</h2>
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
ultricies sapien porttitor nec. Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
ultricies sapien porttitor nec.
</vscode-scrollable>
</div>
Expand All @@ -69,6 +58,15 @@ <h2 class="story-title">Basic example</h2>
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
ultricies sapien porttitor nec. Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
ultricies sapien porttitor nec.
</vscode-scrollable>
</div>
Expand All @@ -82,7 +80,7 @@ <h2 class="story-title">Basic example</h2>
<div class="story-content">
<component-preview>
<vscode-split-layout class="split-layout-example">
<div slot="start" class="split-layout-content start">
<div slot="start">
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
Expand All @@ -94,34 +92,32 @@ <h2 class="story-title">Basic example</h2>
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
ultricies sapien porttitor nec.
</div>
<div slot="end" class="split-layout-content">
<vscode-split-layout split="horizontal" class="split-layout-nested-example">
<div slot="start" class="split-layout-nested-content start">
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae.
Phasellus vestibulum pellentesque ligula malesuada sollicitudin. Vivamus
vitae erat eget nulla laoreet porttitor. Nullam sit amet leo et velit
molestie maximus. Vestibulum arcu leo, tempor nec pretium id, vehicula
id odio. Etiam ultricies ligula dolor, in tincidunt nunc maximus at.
Curabitur tincidunt nulla in magna pharetra commodo. Donec vestibulum
mollis quam, ut consequat dolor finibus ac. Nulla suscipit ac sem non
fringilla. Nullam eros ante, suscipit hendrerit molestie a, tempor nec
turpis. Morbi eget erat suscipit, blandit nibh nec, molestie augue.
Aenean consectetur dapibus mauris, eget ultricies sapien porttitor nec.
</div>
<div slot="end" class="split-layout-nested-content">
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae.
Phasellus vestibulum pellentesque ligula malesuada sollicitudin. Vivamus
vitae erat eget nulla laoreet porttitor. Nullam sit amet leo et velit
molestie maximus. Vestibulum arcu leo, tempor nec pretium id, vehicula
id odio. Etiam ultricies ligula dolor, in tincidunt nunc maximus at.
Curabitur tincidunt nulla in magna pharetra commodo. Donec vestibulum
mollis quam, ut consequat dolor finibus ac. Nulla suscipit ac sem non
fringilla. Nullam eros ante, suscipit hendrerit molestie a, tempor nec
turpis. Morbi eget erat suscipit, blandit nibh nec, molestie augue.
Aenean consectetur dapibus mauris, eget ultricies sapien porttitor nec.
</div>
</vscode-split-layout>
</div>
<vscode-split-layout style="height: 100%;" split="horizontal" slot="end">
<div slot="start">
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
ultricies sapien porttitor nec.
</div>
<div slot="end">
Praesent ultrices mauris lectus, eu molestie erat lacinia vitae. Phasellus
vestibulum pellentesque ligula malesuada sollicitudin. Vivamus vitae erat
eget nulla laoreet porttitor. Nullam sit amet leo et velit molestie maximus.
Vestibulum arcu leo, tempor nec pretium id, vehicula id odio. Etiam
ultricies ligula dolor, in tincidunt nunc maximus at. Curabitur tincidunt
nulla in magna pharetra commodo. Donec vestibulum mollis quam, ut consequat
dolor finibus ac. Nulla suscipit ac sem non fringilla. Nullam eros ante,
suscipit hendrerit molestie a, tempor nec turpis. Morbi eget erat suscipit,
blandit nibh nec, molestie augue. Aenean consectetur dapibus mauris, eget
ultricies sapien porttitor nec.
</div>
</vscode-split-layout>
</vscode-split-layout>
</component-preview>
</div>
Expand Down
22 changes: 22 additions & 0 deletions src/vscode-split-layout/vscode-split-layout.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,42 @@ const styles: CSSResultGroup = [
defaultStyles,
css`
:host {
--separator-border: var(--vscode-editorWidget-border, transparent);
border: 1px solid var(--vscode-editorWidget-border);
display: block;
overflow: hidden;
position: relative;
}
::slotted(*) {
height: 100%;
width: 100%;
}
::slotted(vscode-split-layout) {
border: 0;
}
.start {
box-sizing: border-box;
left: 0;
top: 0;
overflow: hidden;
position: absolute;
}
:host([split='vertical']) .start {
border-right: 1px solid var(--separator-border);
}
:host([split='horizontal']) .start {
border-bottom: 1px solid var(--separator-border);
}
.end {
bottom: 0;
box-sizing: border-box;
overflow: hidden;
position: absolute;
right: 0;
Expand Down
42 changes: 36 additions & 6 deletions src/vscode-split-layout/vscode-split-layout.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import {html, TemplateResult} from 'lit';
import {customElement, property, state} from 'lit/decorators.js';
import {
customElement,
property,
queryAssignedElements,
state,
} from 'lit/decorators.js';
import {classMap} from 'lit/directives/class-map.js';
import {styleMap} from 'lit/directives/style-map.js';
import {VscElement} from '../includes/VscElement.js';
Expand All @@ -12,7 +17,7 @@ import styles from './vscode-split-layout.styles.js';
export class VscodeSplitLayout extends VscElement {
static styles = styles;

@property()
@property({reflect: true})
split: 'horizontal' | 'vertical' = 'vertical';

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

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

@state()
Expand Down Expand Up @@ -54,18 +59,28 @@ export class VscodeSplitLayout extends VscElement {
@state()
private _hide = false;

@queryAssignedElements({slot: 'start', selector: 'vscode-split-layout'})
private _nestedLayoutsAtStart!: HTMLElement[];

@queryAssignedElements({slot: 'end', selector: 'vscode-split-layout'})
private _nestedLayoutsAtEnd!: HTMLElement[];

private _boundRect: DOMRect = new DOMRect();
private _handleOffset = 0;

connectedCallback(): void {
super.connectedCallback();

this._boundRect = this.getBoundingClientRect();
this._initPosition();
}

/** @internal */
initializeResizeHandler() {
this._initPosition();
}

private _initPosition() {
this._boundRect = this.getBoundingClientRect();
const {height, width} = this._boundRect;
const maxPos = this.split === 'vertical' ? width : height;
const matches = /(^[0-9.]+)(%{0,1})$/.exec(this.initialPosition);
Expand Down Expand Up @@ -112,6 +127,8 @@ export class VscodeSplitLayout extends VscElement {
private _handleMouseDown(event: MouseEvent) {
event.stopPropagation();
event.preventDefault();

this._boundRect = this.getBoundingClientRect();
const {left, top, width, height} = this._boundRect;

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

private _handleSlotChange() {
const nestedLayouts = [
...this._nestedLayoutsAtStart,
...this._nestedLayoutsAtEnd,
];

nestedLayouts.forEach((e) => {
if (e instanceof VscodeSplitLayout) {
e.initializeResizeHandler();
}
});
}

render(): TemplateResult {
const startPaneStyles = styleMap({
bottom: `${this._startPaneBottom}%`,
Expand Down Expand Up @@ -228,10 +258,10 @@ export class VscodeSplitLayout extends VscElement {

return html`
<div class="start" style="${startPaneStyles}">
<slot name="start"></slot>
<slot name="start" @slotchange=${this._handleSlotChange}></slot>
</div>
<div class="end" style="${endPaneStyles}">
<slot name="end"></slot>
<slot name="end" @slotchange=${this._handleSlotChange}></slot>
</div>
<div class="${handleOverlayClasses}"></div>
<div
Expand Down

0 comments on commit 192803e

Please sign in to comment.