Skip to content

Commit

Permalink
sash: use linked sashes as arrays
Browse files Browse the repository at this point in the history
  • Loading branch information
@joaomoreno
joaomoreno committed Jun 8, 2018
1 parent 44b554d commit 4f5c928
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 82 deletions.
37 changes: 19 additions & 18 deletions src/vs/base/browser/ui/grid/gridview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ export interface IGridViewOptions {
styles?: IGridViewStyles;
}

function arrayIdentity<T>(el: T): T[] {
return el ? [el] : [];
}

class BranchNode implements ISplitView, IDisposable {

readonly element: HTMLElement;
Expand Down Expand Up @@ -136,10 +140,10 @@ class BranchNode implements ISplitView, IDisposable {
private splitviewSashResetDisposable: IDisposable = EmptyDisposable;
private childrenSashResetDisposable: IDisposable = EmptyDisposable;

get orthogonalStartSash(): Sash | undefined { return this.splitview.orthogonalStartSash; }
set orthogonalStartSash(sash: Sash | undefined) { this.splitview.orthogonalStartSash = sash; }
get orthogonalEndSash(): Sash | undefined { return this.splitview.orthogonalEndSash; }
set orthogonalEndSash(sash: Sash | undefined) { this.splitview.orthogonalEndSash = sash; }
get linkedStartSashes(): Sash[] { return this.splitview.linkedStartSashes; }
set linkedStartSashes(sashes: Sash[]) { this.splitview.linkedStartSashes = sashes; }
get linkedEndSashes(): Sash[] { return this.splitview.linkedEndSashes; }
set linkedEndSashes(sashes: Sash[]) { this.splitview.linkedEndSashes = sashes; }

constructor(
readonly orientation: Orientation,
Expand Down Expand Up @@ -195,15 +199,15 @@ class BranchNode implements ISplitView, IDisposable {
const last = index === this.splitview.length;
this.splitview.addView(node, size, index);
this.children.splice(index, 0, node);
node.orthogonalStartSash = this.splitview.sashes[index - 1];
node.orthogonalEndSash = this.splitview.sashes[index];
node.linkedStartSashes = arrayIdentity(this.splitview.sashes[index - 1]);
node.linkedEndSashes = arrayIdentity(this.splitview.sashes[index]);

if (!first) {
this.children[index - 1].orthogonalEndSash = this.splitview.sashes[index - 1];
this.children[index - 1].linkedEndSashes = arrayIdentity(this.splitview.sashes[index - 1]);
}

if (!last) {
this.children[index + 1].orthogonalStartSash = this.splitview.sashes[index];
this.children[index + 1].linkedStartSashes = arrayIdentity(this.splitview.sashes[index]);
}

this.onDidChildrenChange();
Expand All @@ -220,11 +224,11 @@ class BranchNode implements ISplitView, IDisposable {
this.children.splice(index, 1);

if (!first) {
this.children[index - 1].orthogonalEndSash = this.splitview.sashes[index - 1];
this.children[index - 1].linkedEndSashes = arrayIdentity(this.splitview.sashes[index - 1]);
}

if (!last) { // [0,1,2,3] (2) => [0,1,3]
this.children[index].orthogonalStartSash = this.splitview.sashes[Math.max(index - 1, 0)];
this.children[index].linkedStartSashes = arrayIdentity(this.splitview.sashes[Math.max(index - 1, 0)]);
}

this.onDidChildrenChange();
Expand All @@ -244,7 +248,7 @@ class BranchNode implements ISplitView, IDisposable {
}

this.splitview.swapViews(from, to);
[this.children[from].orthogonalStartSash, this.children[from].orthogonalEndSash, this.children[to].orthogonalStartSash, this.children[to].orthogonalEndSash] = [this.children[to].orthogonalStartSash, this.children[to].orthogonalEndSash, this.children[from].orthogonalStartSash, this.children[from].orthogonalEndSash];
[this.children[from].linkedStartSashes, this.children[from].linkedEndSashes, this.children[to].linkedStartSashes, this.children[to].linkedEndSashes] = [this.children[to].linkedStartSashes, this.children[to].linkedEndSashes, this.children[from].linkedStartSashes, this.children[from].linkedEndSashes];
[this.children[from], this.children[to]] = [this.children[to], this.children[from]];
}

Expand Down Expand Up @@ -342,13 +346,10 @@ class LeafNode implements ISplitView, IDisposable {
return mapEvent(this.view.onDidChange, this.orientation === Orientation.HORIZONTAL ? ({ width }) => width : ({ height }) => height);
}

set orthogonalStartSash(sash: Sash) {
// noop
}

set orthogonalEndSash(sash: Sash) {
// noop
}
get linkedStartSashes(): Sash[] { return []; }
set linkedStartSashes(sashes: Sash[]) { }
get linkedEndSashes(): Sash[] { return []; }
set linkedEndSashes(sashes: Sash[]) { }

layout(size: number): void {
this._size = size;
Expand Down
16 changes: 8 additions & 8 deletions src/vs/base/browser/ui/sash/sash.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@
cursor: n-resize;
}

.monaco-sash:not(.disabled).orthogonal-start::before,
.monaco-sash:not(.disabled).orthogonal-end::after {
.monaco-sash:not(.disabled).linked-start::before,
.monaco-sash:not(.disabled).linked-end::after {
content: ' ';
height: 8px;
width: 8px;
Expand All @@ -62,22 +62,22 @@
position: absolute;
}

.monaco-sash.orthogonal-start.vertical::before {
.monaco-sash.linked-start.vertical::before {
left: -2px;
top: -4px;
}

.monaco-sash.orthogonal-end.vertical::after {
.monaco-sash.linked-end.vertical::after {
left: -2px;
bottom: -4px;
}

.monaco-sash.orthogonal-start.horizontal::before {
.monaco-sash.linked-start.horizontal::before {
top: -2px;
left: -4px;
}

.monaco-sash.orthogonal-end.horizontal::after {
.monaco-sash.linked-end.horizontal::after {
top: -2px;
right: -4px;
}
Expand All @@ -102,7 +102,7 @@
background: cyan;
}

.monaco-sash.debug:not(.disabled).orthogonal-start::before,
.monaco-sash.debug:not(.disabled).orthogonal-end::after {
.monaco-sash.debug:not(.disabled).linked-start::before,
.monaco-sash.debug:not(.disabled).linked-end::after {
background: red;
}
90 changes: 48 additions & 42 deletions src/vs/base/browser/ui/sash/sash.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import { isMacintosh } from 'vs/base/common/platform';
import * as types from 'vs/base/common/types';
import { EventType, GestureEvent, Gesture } from 'vs/base/browser/touch';
import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
import { Event, Emitter } from 'vs/base/common/event';
import { Event, Emitter, anyEvent, mapEvent } from 'vs/base/common/event';
import { getElementsByTagName, EventHelper, createStyleSheet, addDisposableListener, Dimension, append, $, addClass, removeClass, toggleClass } from 'vs/base/browser/dom';
import { domEvent } from 'vs/base/browser/event';

const DEBUG = false;
const DEBUG = true;

export interface ISashLayoutProvider { }

Expand All @@ -42,8 +42,8 @@ export interface ISashEvent {

export interface ISashOptions {
orientation?: Orientation;
orthogonalStartSash?: Sash;
orthogonalEndSash?: Sash;
linkedStartSashes?: Sash[];
linkedEndSashes?: Sash[];
}

export enum Orientation {
Expand Down Expand Up @@ -96,36 +96,40 @@ export class Sash {
private readonly _onDidEnd = new Emitter<void>();
readonly onDidEnd: Event<void> = this._onDidEnd.event;

private orthogonalStartSashDisposables: IDisposable[] = [];
private _orthogonalStartSash: Sash | undefined;
get orthogonalStartSash(): Sash | undefined { return this._orthogonalStartSash; }
set orthogonalStartSash(sash: Sash | undefined) {
this.orthogonalStartSashDisposables = dispose(this.orthogonalStartSashDisposables);
private linkedStartSashesDisposables: IDisposable[] = [];
private _linkedStartSashes: Sash[] = [];
get linkedStartSashes(): Sash[] { return this._linkedStartSashes; }
set linkedStartSashes(sashes: Sash[]) {
this.linkedStartSashesDisposables = dispose(this.linkedStartSashesDisposables);

if (sash) {
sash.onDidEnablementChange(this.onOrthogonalStartSashEnablementChange, this, this.orthogonalStartSashDisposables);
this.onOrthogonalStartSashEnablementChange(sash.state);
if (sashes.length > 0) {
mapEvent(anyEvent(...sashes.map(s => s.onDidEnablementChange)), () => sashes.map(s => s.state))
(this.onLinkedStartSashEnablementChange, this, this.linkedStartSashesDisposables);

this.onLinkedStartSashEnablementChange(sashes.map(s => s.state));
} else {
this.onOrthogonalStartSashEnablementChange(SashState.Disabled);
this.onLinkedStartSashEnablementChange([]);
}

this._orthogonalStartSash = sash;
this._linkedStartSashes = sashes;
}

private orthogonalEndSashDisposables: IDisposable[] = [];
private _orthogonalEndSash: Sash | undefined;
get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; }
set orthogonalEndSash(sash: Sash | undefined) {
this.orthogonalEndSashDisposables = dispose(this.orthogonalEndSashDisposables);
private linkedEndSashDisposables: IDisposable[] = [];
private _linkedEndSash: Sash[] = [];
get linkedEndSash(): Sash[] { return this._linkedEndSash; }
set linkedEndSash(sashes: Sash[]) {
this.linkedEndSashDisposables = dispose(this.linkedEndSashDisposables);

if (sashes) {
mapEvent(anyEvent(...sashes.map(s => s.onDidEnablementChange)), () => sashes.map(s => s.state))
(this.onLinkedEndSashEnablementChange, this, this.linkedEndSashDisposables);

if (sash) {
sash.onDidEnablementChange(this.onOrthogonalEndSashEnablementChange, this, this.orthogonalEndSashDisposables);
this.onOrthogonalEndSashEnablementChange(sash.state);
this.onLinkedEndSashEnablementChange(sashes.map(s => s.state));
} else {
this.onOrthogonalEndSashEnablementChange(SashState.Disabled);
this.onLinkedEndSashEnablementChange([]);
}

this._orthogonalEndSash = sash;
this._linkedEndSash = sashes;
}

constructor(container: HTMLElement, layoutProvider: ISashLayoutProvider, options: ISashOptions = {}) {
Expand All @@ -151,8 +155,8 @@ export class Sash {
this.hidden = false;
this.layoutProvider = layoutProvider;

this.orthogonalStartSash = options.orthogonalStartSash;
this.orthogonalEndSash = options.orthogonalEndSash;
this.linkedStartSashes = options.linkedStartSashes || [];
this.linkedEndSash = options.linkedEndSashes || [];

toggleClass(this.el, 'debug', DEBUG);
}
Expand All @@ -178,27 +182,29 @@ export class Sash {

let isMultisashResize = false;

if (!(e as any).__orthogonalSashEvent) {
let orthogonalSash: Sash | undefined;
if (!(e as any).__linkedSashEvent) {
let linkedSashes: Sash[] = [];

if (this.orientation === Orientation.VERTICAL) {
if (e.offsetY <= 4) {
orthogonalSash = this.orthogonalStartSash;
linkedSashes = this.linkedStartSashes;
} else if (e.offsetY >= this.el.clientHeight - 4) {
orthogonalSash = this.orthogonalEndSash;
linkedSashes = this.linkedEndSash;
}
} else {
if (e.offsetX <= 4) {
orthogonalSash = this.orthogonalStartSash;
linkedSashes = this.linkedStartSashes;
} else if (e.offsetX >= this.el.clientWidth - 4) {
orthogonalSash = this.orthogonalEndSash;
linkedSashes = this.linkedEndSash;
}
}

if (orthogonalSash) {
isMultisashResize = true;
(e as any).__orthogonalSashEvent = true;
orthogonalSash.onMouseDown(e);
if (linkedSashes.length > 0) {
for (const sash of linkedSashes) {
isMultisashResize = true;
(e as any).__linkedSashEvent = true;
sash.onMouseDown(e);
}
}
}

Expand Down Expand Up @@ -368,17 +374,17 @@ export class Sash {
return this.hidden;
}

private onOrthogonalStartSashEnablementChange(state: SashState): void {
toggleClass(this.el, 'orthogonal-start', state !== SashState.Disabled);
private onLinkedStartSashEnablementChange(states: SashState[]): void {
toggleClass(this.el, 'linked-start', states.some(state => state !== SashState.Disabled));
}

private onOrthogonalEndSashEnablementChange(state: SashState): void {
toggleClass(this.el, 'orthogonal-end', state !== SashState.Disabled);
private onLinkedEndSashEnablementChange(states: SashState[]): void {
toggleClass(this.el, 'linked-end', states.some(state => state !== SashState.Disabled));
}

dispose(): void {
this.orthogonalStartSashDisposables = dispose(this.orthogonalStartSashDisposables);
this.orthogonalEndSashDisposables = dispose(this.orthogonalEndSashDisposables);
this.linkedStartSashesDisposables = dispose(this.linkedStartSashesDisposables);
this.linkedEndSashDisposables = dispose(this.linkedEndSashDisposables);

if (this.el && this.el.parentElement) {
this.el.parentElement.removeChild(this.el);
Expand Down
28 changes: 14 additions & 14 deletions src/vs/base/browser/ui/splitview/splitview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const defaultStyles: ISplitViewStyles = {
export interface ISplitViewOptions {
orientation?: Orientation; // default Orientation.VERTICAL
styles?: ISplitViewStyles;
orthogonalStartSash?: Sash;
orthogonalEndSash?: Sash;
linkedStartSash?: Sash;
linkedEndSash?: Sash;
}

export interface IView {
Expand Down Expand Up @@ -139,24 +139,24 @@ export class SplitView implements IDisposable {
return this.viewItems.length;
}

private _orthogonalStartSash: Sash | undefined;
get orthogonalStartSash(): Sash | undefined { return this._orthogonalStartSash; }
set orthogonalStartSash(sash: Sash | undefined) {
private _linkedStartSashes: Sash[] = [];
get linkedStartSashes(): Sash[] { return this._linkedStartSashes; }
set linkedStartSashes(sashes: Sash[]) {
for (const sashItem of this.sashItems) {
sashItem.sash.orthogonalStartSash = sash;
sashItem.sash.linkedStartSashes = sashes;
}

this._orthogonalStartSash = sash;
this._linkedStartSashes = sashes;
}

private _orthogonalEndSash: Sash | undefined;
get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; }
set orthogonalEndSash(sash: Sash | undefined) {
private _linkedEndSashes: Sash[] = [];
get linkedEndSashes(): Sash[] { return this._linkedEndSashes; }
set linkedEndSashes(sashes: Sash[]) {
for (const sashItem of this.sashItems) {
sashItem.sash.orthogonalEndSash = sash;
sashItem.sash.linkedEndSash = sashes;
}

this._orthogonalEndSash = sash;
this._linkedEndSashes = sashes;
}

get sashes(): Sash[] {
Expand Down Expand Up @@ -235,8 +235,8 @@ export class SplitView implements IDisposable {
const layoutProvider = this.orientation === Orientation.VERTICAL ? { getHorizontalSashTop: sash => this.getSashPosition(sash) } : { getVerticalSashLeft: sash => this.getSashPosition(sash) };
const sash = new Sash(this.sashContainer, layoutProvider, {
orientation,
orthogonalStartSash: this.orthogonalStartSash,
orthogonalEndSash: this.orthogonalEndSash
linkedStartSashes: this.linkedStartSashes,
linkedEndSashes: this.linkedEndSashes
});
const sashEventMapper = this.orientation === Orientation.VERTICAL
? (e: IBaseSashEvent) => ({ sash, start: e.startY, current: e.currentY })
Expand Down

0 comments on commit 4f5c928

Please sign in to comment.