Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

体验新版 GitCode，发现更多精彩内容 >>

提交 aaf7b701 编写于 作者: B Benjamin Pasero
浏览文件
操作

allow to dnd group reordering

上级 b48eef3f
隐藏空白更改
内联 并排
Showing with 92 addition and 71 deletion
src/vs/workbench/browser/parts/editor/media/sidebyside.css
浏览文件 @ aaf7b701
......@@ -40,12 +40,12 @@
outline-offset: -2px;
}
.vs .monaco-workbench > .editor > .content.dragging {
.vs .monaco-workbench > .editor > .content.vertical-layout.dragging {
border-left: 1px solid #E7E7E7;
border-right: 1px solid #E7E7E7;
}
.vs-dark .monaco-workbench > .editor > .content.dragging {
.vs-dark .monaco-workbench > .editor > .content.vertical-layout.dragging {
border-left: 1px solid #444;
border-right: 1px solid #444;
}
......@@ -73,11 +73,16 @@
box-sizing: content-box;
}
.vs .monaco-workbench > .editor > .content > .one-editor-silo.dragging {
.vs .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.dragging {
border-left: 1px solid #E7E7E7;
border-right: 1px solid #E7E7E7;
}
.vs .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.dragging {
border-top: 1px solid #E7E7E7;
border-bottom: 1px solid #E7E7E7;
}
.vs .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-center,
.vs .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right {
border-left: 1px solid #E7E7E7;
......@@ -88,11 +93,16 @@
border-top: 1px solid #E7E7E7;
}
.vs-dark .monaco-workbench > .editor > .content > .one-editor-silo.dragging {
.vs-dark .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.dragging {
border-left: 1px solid #444;
border-right: 1px solid #444;
}
.vs-dark .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.dragging {
border-top: 1px solid #444;
border-bottom: 1px solid #444;
}
.vs-dark .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-center,
.vs-dark .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right {
border-left: 1px solid #444;
......@@ -103,11 +113,16 @@
border-top: 1px solid #444;
}
.hc-black .monaco-workbench > .editor > .content > .one-editor-silo.dragging {
.hc-black .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.dragging {
border-left: 1px solid #6FC3DF;
border-right: 1px solid #6FC3DF;
}
.hc-black .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.dragging {
border-top: 1px solid #6FC3DF;
border-bottom: 1px solid #6FC3DF;
}
.hc-black .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-center,
.hc-black .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right {
border-left: 1px solid #6FC3DF;
......@@ -118,14 +133,22 @@
border-top: 1px solid #6FC3DF;
}
.monaco-workbench > .editor > .content > .one-editor-silo.draggedunder {
.monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.draggedunder {
transition: left 200ms ease-out;
}
.monaco-workbench > .editor > .content > .editor-right.draggedunder {
.monaco-workbench > .editor > .content.vertical-layout > .editor-right.draggedunder {
transition-property: right;
}
.monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.draggedunder {
transition: top 200ms ease-out;
}
.monaco-workbench > .editor > .content.horizontal-layout > .editor-right.draggedunder {
transition-property: bottom;
}
.monaco-workbench > .editor > .content > .one-editor-silo > .container {
height: 100%;
}
......
src/vs/workbench/browser/parts/editor/sideBySideEditorControl.ts
浏览文件 @ aaf7b701
......@@ -1004,22 +1004,11 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
// Update overlay styles
if (canSplit && isOverSplitRightOrBottom) {
if ($this.layoutVertically) {
overlay.style({ left: '50%', width: '50%' });
} else {
overlay.style({ top: '50%', height: '50%' });
}
overlay.style($this.layoutVertically ? { left: '50%', width: '50%' } : { top: '50%', height: '50%' });
} else if (canSplit && isOverSplitLeftOrUp) {
if ($this.layoutVertically) {
overlay.style({ width: '50%' });
} else {
overlay.style({ height: '50%' });
}
overlay.style($this.layoutVertically ? { width: '50%' } : { height: '50%' });
} else {
overlay.style({
left: '0',
width: '100%'
});
overlay.style({ left: '0', width: '100%' });
}
// Make sure the overlay is visible
......@@ -1188,8 +1177,8 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
const visibleEditorCount = this.getVisibleEditorCount();
const mouseDownEvent = new StandardMouseEvent(e);
const startX = mouseDownEvent.posx;
let oldNewLeft: number = null;
const startPos = this.layoutVertically ? mouseDownEvent.posx : mouseDownEvent.posy;
let oldNewPos: number = null;
this.silos[position].addClass('drag');
this.parent.addClass('drag');
......@@ -1199,63 +1188,63 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
DOM.EventHelper.stop(e, false);
const mouseMoveEvent = new StandardMouseEvent(e);
const diffX = mouseMoveEvent.posx - startX;
let newLeft: number = null;
const diffPos = (this.layoutVertically ? mouseMoveEvent.posx : mouseMoveEvent.posy) - startPos;
let newPos: number = null;
if (Math.abs(diffX) > 5) {
if (Math.abs(diffPos) > 5) {
wasDragged = true;
}
switch (position) {
// [ ! ]|[ ]: Moves only to the right but not outside of dimension width to the right
// [ ! ]|[ ]: Moves only to the right/bottom but not outside of dimension to the right/bottom
case Position.LEFT: {
newLeft = Math.max(-1 /* 1px border accomodation */, Math.min(diffX, this.dimension.width - this.silosSize[Position.LEFT]));
newPos = Math.max(-1 /* 1px border accomodation */, Math.min(diffPos, this.totalSize - this.silosSize[Position.LEFT]));
break;
}
case Position.CENTER: {
// [ ]|[ ! ]: Moves only to the left but not outside of dimension width to the left
// [ ]|[ ! ]: Moves only to the left/top but not outside of dimension to the left/top
if (visibleEditorCount === 2) {
newLeft = Math.min(this.silosSize[Position.LEFT], Math.max(-1 /* 1px border accomodation */, this.silosSize[Position.LEFT] + diffX));
newPos = Math.min(this.silosSize[Position.LEFT], Math.max(-1 /* 1px border accomodation */, this.silosSize[Position.LEFT] + diffPos));
}
// [ ]|[ ! ]|[ ]: Moves to left and right but not outside of dimensions width on both sides
// [ ]|[ ! ]|[ ]: Moves to left/top and right/bottom but not outside of dimensions on both sides
else {
newLeft = Math.min(this.dimension.width - this.silosSize[Position.CENTER], Math.max(-1 /* 1px border accomodation */, this.silosSize[Position.LEFT] + diffX));
newPos = Math.min(this.totalSize - this.silosSize[Position.CENTER], Math.max(-1 /* 1px border accomodation */, this.silosSize[Position.LEFT] + diffPos));
}
break;
}
// [ ]|[ ]|[ ! ]: Moves to the right but not outside of dimension width on the left side
// [ ]|[ ]|[ ! ]: Moves to the right/bottom but not outside of dimension on the left/top side
case Position.RIGHT: {
newLeft = Math.min(this.silosSize[Position.LEFT] + this.silosSize[Position.CENTER], Math.max(-1 /* 1px border accomodation */, this.silosSize[Position.LEFT] + this.silosSize[Position.CENTER] + diffX));
newPos = Math.min(this.silosSize[Position.LEFT] + this.silosSize[Position.CENTER], Math.max(-1 /* 1px border accomodation */, this.silosSize[Position.LEFT] + this.silosSize[Position.CENTER] + diffPos));
break;
}
}
// Return early if position did not change
if (oldNewLeft === newLeft) {
if (oldNewPos === newPos) {
return;
}
oldNewLeft = newLeft;
oldNewPos = newPos;
// Live drag Feedback
const moveTo: Position = this.findMoveTarget(position, diffX);
const moveTo: Position = this.findMoveTarget(position, diffPos);
switch (position) {
case Position.LEFT: {
if (moveTo === Position.LEFT || moveTo === null) {
this.silos[Position.CENTER].style({ left: this.silosSize[Position.LEFT] + 'px', right: 'auto', borderLeftWidth: '1px' });
this.silos[Position.RIGHT].style({ left: 'auto', right: 0 });
this.posSilo(Position.CENTER, `${this.silosSize[Position.LEFT]}px`, 'auto');
this.posSilo(Position.RIGHT, 'auto', 0);
} else if (moveTo === Position.CENTER) {
this.silos[Position.CENTER].style({ left: 0, right: 'auto', borderLeftWidth: 0 });
this.posSilo(Position.CENTER, 0, 'auto');
this.silos[Position.CENTER].addClass('draggedunder');
this.silos[Position.RIGHT].style({ left: 'auto', right: 0 });
this.posSilo(Position.RIGHT, 'auto', 0);
} else if (moveTo === Position.RIGHT) {
this.silos[Position.CENTER].style({ left: 0, right: 'auto' });
this.silos[Position.RIGHT].style({ left: 'auto', right: this.silosSize[Position.LEFT] + 'px' });
this.posSilo(Position.CENTER, 0, 'auto');
this.posSilo(Position.RIGHT, 'auto', `${this.silosSize[Position.LEFT]}px`);
this.silos[Position.RIGHT].addClass('draggedunder');
}
break;
......@@ -1263,38 +1252,38 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
case Position.CENTER: {
if (moveTo === Position.LEFT) {
this.silos[Position.LEFT].style({ left: this.silosSize[Position.CENTER] + 'px', right: 'auto' });
this.posSilo(Position.LEFT, `${this.silosSize[Position.CENTER]}px`, 'auto');
this.silos[Position.LEFT].addClass('draggedunder');
} else if (moveTo === Position.CENTER || moveTo === null) {
this.silos[Position.LEFT].style({ left: 0, right: 'auto' });
this.silos[Position.RIGHT].style({ left: 'auto', right: 0 });
this.posSilo(Position.LEFT, 0, 'auto');
this.posSilo(Position.RIGHT, 'auto', 0);
} else if (moveTo === Position.RIGHT) {
this.silos[Position.RIGHT].style({ left: 'auto', right: this.silosSize[Position.CENTER] + 'px' });
this.posSilo(Position.RIGHT, 'auto', `${this.silosSize[Position.CENTER]}px`);
this.silos[Position.RIGHT].addClass('draggedunder');
this.silos[Position.LEFT].style({ left: 0, right: 'auto' });
this.posSilo(Position.LEFT, 0, 'auto');
}
break;
}
case Position.RIGHT: {
if (moveTo === Position.LEFT) {
this.silos[Position.LEFT].style({ left: this.silosSize[Position.RIGHT] + 'px', right: 'auto' });
this.posSilo(Position.LEFT, `${this.silosSize[Position.RIGHT]}px`, 'auto');
this.silos[Position.LEFT].addClass('draggedunder');
} else if (moveTo === Position.CENTER) {
this.silos[Position.LEFT].style({ left: 0, right: 'auto' });
this.silos[Position.CENTER].style({ left: (this.silosSize[Position.LEFT] + this.silosSize[Position.RIGHT]) + 'px', right: 'auto' });
this.posSilo(Position.LEFT, 0, 'auto');
this.posSilo(Position.CENTER, `${this.silosSize[Position.LEFT] + this.silosSize[Position.RIGHT]}px`, 'auto');
this.silos[Position.CENTER].addClass('draggedunder');
} else if (moveTo === Position.RIGHT || moveTo === null) {
this.silos[Position.LEFT].style({ left: 0, right: 'auto' });
this.silos[Position.CENTER].style({ left: this.silosSize[Position.LEFT] + 'px', right: 'auto' });
this.posSilo(Position.LEFT, 0, 'auto');
this.posSilo(Position.CENTER, `${this.silosSize[Position.LEFT]}px`, 'auto');
}
break;
}
}
// Move the editor to provide feedback to the user and add class
if (newLeft !== null) {
this.silos[position].style({ left: newLeft + 'px' });
if (newPos !== null) {
this.silos[position].style(this.layoutVertically ? { left: `${newPos}px` } : { top: `${newPos}px` });
this.silos[position].addClass('dragging');
this.parent.addClass('dragging');
}
......@@ -1316,14 +1305,15 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
this.parent.removeClass('dragging');
this.silos[position].removeClass('dragging');
POSITIONS.forEach(p => this.silos[p].removeClass('draggedunder'));
this.silos[Position.LEFT].style({ left: 0, right: 'auto' });
this.silos[Position.CENTER].style({ left: 'auto', right: 'auto', borderLeftWidth: '1px' });
this.silos[Position.RIGHT].style({ left: 'auto', right: 0, borderLeftWidth: '1px' });
this.posSilo(Position.LEFT, 0, 'auto');
this.posSilo(Position.CENTER, 'auto', 'auto');
this.posSilo(Position.RIGHT, 'auto', 0);
// Find move target
const mouseUpEvent = new StandardMouseEvent(e);
const diffX = mouseUpEvent.posx - startX;
const moveTo: Position = this.findMoveTarget(position, diffX);
const diffPos = (this.layoutVertically ? mouseUpEvent.posx : mouseUpEvent.posy) - startPos;
const moveTo: Position = this.findMoveTarget(position, diffPos);
// Move to valid position if any
if (moveTo !== null) {
......@@ -1345,63 +1335,71 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
});
}
private findMoveTarget(position: Position, diffX: number): Position {
private posSilo(pos: number, leftTop: string | number, rightBottom?: string | number): void {
if (this.layoutVertically) {
this.silos[pos].style({ left: leftTop, right: rightBottom });
} else {
this.silos[pos].style({ top: leftTop, bottom: rightBottom });
}
}
private findMoveTarget(position: Position, diffPos: number): Position {
const visibleEditorCount = this.getVisibleEditorCount();
switch (position) {
case Position.LEFT: {
// [ ! ]|[] -> []|[ ! ]
if (visibleEditorCount === 2 && (diffX >= this.silosSize[Position.LEFT] / 2 || diffX >= this.silosSize[Position.CENTER] / 2)) {
if (visibleEditorCount === 2 && (diffPos >= this.silosSize[Position.LEFT] / 2 || diffPos >= this.silosSize[Position.CENTER] / 2)) {
return Position.CENTER;
}
// [ ! ]|[]|[] -> []|[]|[ ! ]
if (visibleEditorCount === 3 && (diffX >= this.silosSize[Position.LEFT] / 2 + this.silosSize[Position.CENTER] || diffX >= this.silosSize[Position.RIGHT] / 2 + this.silosSize[Position.CENTER])) {
if (visibleEditorCount === 3 && (diffPos >= this.silosSize[Position.LEFT] / 2 + this.silosSize[Position.CENTER] || diffPos >= this.silosSize[Position.RIGHT] / 2 + this.silosSize[Position.CENTER])) {
return Position.RIGHT;
}
// [ ! ]|[]|[] -> []|[ ! ]|[]
if (visibleEditorCount === 3 && (diffX >= this.silosSize[Position.LEFT] / 2 || diffX >= this.silosSize[Position.CENTER] / 2)) {
if (visibleEditorCount === 3 && (diffPos >= this.silosSize[Position.LEFT] / 2 || diffPos >= this.silosSize[Position.CENTER] / 2)) {
return Position.CENTER;
}
break;
}
case Position.CENTER: {
if (visibleEditorCount === 2 && diffX > 0) {
if (visibleEditorCount === 2 && diffPos > 0) {
return null; // Return early since CENTER cannot be moved to the RIGHT unless there is a RIGHT position
}
// []|[ ! ] -> [ ! ]|[]
if (visibleEditorCount === 2 && (Math.abs(diffX) >= this.silosSize[Position.CENTER] / 2 || Math.abs(diffX) >= this.silosSize[Position.LEFT] / 2)) {
if (visibleEditorCount === 2 && (Math.abs(diffPos) >= this.silosSize[Position.CENTER] / 2 || Math.abs(diffPos) >= this.silosSize[Position.LEFT] / 2)) {
return Position.LEFT;
}
// []|[ ! ]|[] -> [ ! ]|[]|[]
if (visibleEditorCount === 3 && ((diffX < 0 && Math.abs(diffX) >= this.silosSize[Position.CENTER] / 2) || (diffX < 0 && Math.abs(diffX) >= this.silosSize[Position.LEFT] / 2))) {
if (visibleEditorCount === 3 && ((diffPos < 0 && Math.abs(diffPos) >= this.silosSize[Position.CENTER] / 2) || (diffPos < 0 && Math.abs(diffPos) >= this.silosSize[Position.LEFT] / 2))) {
return Position.LEFT;
}
// []|[ ! ]|[] -> []|[]|[ ! ]
if (visibleEditorCount === 3 && ((diffX > 0 && Math.abs(diffX) >= this.silosSize[Position.CENTER] / 2) || (diffX > 0 && Math.abs(diffX) >= this.silosSize[Position.RIGHT] / 2))) {
if (visibleEditorCount === 3 && ((diffPos > 0 && Math.abs(diffPos) >= this.silosSize[Position.CENTER] / 2) || (diffPos > 0 && Math.abs(diffPos) >= this.silosSize[Position.RIGHT] / 2))) {
return Position.RIGHT;
}
break;
}
case Position.RIGHT: {
if (diffX > 0) {
if (diffPos > 0) {
return null; // Return early since RIGHT cannot be moved more to the RIGHT
}
// []|[]|[ ! ] -> [ ! ]|[]|[]
if (Math.abs(diffX) >= this.silosSize[Position.RIGHT] / 2 + this.silosSize[Position.CENTER] || Math.abs(diffX) >= this.silosSize[Position.LEFT] / 2 + this.silosSize[Position.CENTER]) {
if (Math.abs(diffPos) >= this.silosSize[Position.RIGHT] / 2 + this.silosSize[Position.CENTER] || Math.abs(diffPos) >= this.silosSize[Position.LEFT] / 2 + this.silosSize[Position.CENTER]) {
return Position.LEFT;
}
// []|[]|[ ! ] -> []|[ ! ]|[]
if (Math.abs(diffX) >= this.silosSize[Position.RIGHT] / 2 || Math.abs(diffX) >= this.silosSize[Position.CENTER] / 2) {
if (Math.abs(diffPos) >= this.silosSize[Position.RIGHT] / 2 || Math.abs(diffPos) >= this.silosSize[Position.CENTER] / 2) {
return Position.CENTER;
}
break;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或