splitview: better snap view choice

This commit is contained in:
Joao Moreno 2019-07-11 16:25:42 +02:00
parent f94f3e331f
commit 510c64cedb
2 changed files with 26 additions and 20 deletions

View file

@ -497,13 +497,22 @@ export class SplitView extends Disposable {
const minDelta = Math.max(minDeltaUp, minDeltaDown);
const maxDelta = Math.min(maxDeltaDown, maxDeltaUp);
if (this.viewItems[index].snap) {
const snapBefore = this.viewItems[index].snap;
const snapAfter = this.viewItems[index + 1].snap;
if (snapBefore && snapAfter) {
snapIndex = index + 1 < (this.viewItems.length - index - 1)
? index
: index + 1;
} else if (snapBefore) {
snapIndex = index;
snapLimitDelta = minDelta - (this.viewItems[index].minimumSize / 2);
} else if (this.viewItems[index + 1].snap) {
} else if (snapAfter) {
snapIndex = index + 1;
snapLimitDelta = maxDelta + (this.viewItems[index + 1].minimumSize / 2);
}
snapLimitDelta = snapIndex === index
? minDelta - (this.viewItems[index].minimumSize / 2)
: maxDelta + (this.viewItems[index + 1].minimumSize / 2);
}
this.sashDragState = { start, current: start, index, sizes, minDelta, maxDelta, alt, snapIndex, snapLimitDelta, disposable };
@ -668,15 +677,9 @@ export class SplitView extends Disposable {
if (typeof snapIndex === 'number' && typeof snapLimitDelta === 'number') {
const snapView = this.viewItems[snapIndex];
if (snapIndex === index) { // up
if (delta >= snapLimitDelta) {
snapView.visible = true;
} else {
snapView.visible = false;
}
} else { // down
snapView.visible = delta < snapLimitDelta;
}
snapView.visible = snapIndex === index
? delta >= snapLimitDelta // up
: delta < snapLimitDelta; // down
return this.resize(index, delta, sizes, lowPriorityIndexes, highPriorityIndexes, overloadMinDelta, overloadMaxDelta);
}

View file

@ -34,16 +34,16 @@
class View {
static ID = 0;
constructor(snap) {
constructor() {
const id = View.ID++;
this.element = document.createElement('div');
this.element.className = 'view';
this.element.style.backgroundColor = `hsl(${id * 20}, 50%, 70%)`;
this.element.textContent = `${View.ID++}`;
this.element.style.backgroundColor = `hsl(${(id * 41) % 360}, 50%, 70%)`;
this.element.textContent = `${id}`;
this.minimumSize = 100;
this.maximumSize = Number.POSITIVE_INFINITY;
this.onDidChange = Event.None;
this.snap = snap;
this.snap = true;
}
layout(size, orientation) {
@ -55,13 +55,16 @@
const splitview = new SplitView(container, {});
splitview.layout(600);
const view1 = new View(true);
const view2 = new View(false);
const view3 = new View(true);
const view1 = new View();
const view2 = new View();
const view3 = new View();
const view4 = new View();
splitview.addView(view1, Sizing.Distribute);
splitview.addView(view2, Sizing.Distribute);
splitview.addView(view3, Sizing.Distribute);
splitview.addView(view4, Sizing.Distribute);
// splitview.addView(view5, Sizing.Distribute);
// const index = 2;
// setInterval(() => splitview.setViewVisible(index, !splitview.isViewVisible(index)), 1000);