提交 aaf7b701 编写于 作者: B Benjamin Pasero

allow to dnd group reordering

上级 b48eef3f
...@@ -40,12 +40,12 @@ ...@@ -40,12 +40,12 @@
outline-offset: -2px; outline-offset: -2px;
} }
.vs .monaco-workbench > .editor > .content.dragging { .vs .monaco-workbench > .editor > .content.vertical-layout.dragging {
border-left: 1px solid #E7E7E7; border-left: 1px solid #E7E7E7;
border-right: 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-left: 1px solid #444;
border-right: 1px solid #444; border-right: 1px solid #444;
} }
...@@ -73,11 +73,16 @@ ...@@ -73,11 +73,16 @@
box-sizing: content-box; 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-left: 1px solid #E7E7E7;
border-right: 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-center,
.vs .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right { .vs .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right {
border-left: 1px solid #E7E7E7; border-left: 1px solid #E7E7E7;
...@@ -88,11 +93,16 @@ ...@@ -88,11 +93,16 @@
border-top: 1px solid #E7E7E7; 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-left: 1px solid #444;
border-right: 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-center,
.vs-dark .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right { .vs-dark .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right {
border-left: 1px solid #444; border-left: 1px solid #444;
...@@ -103,11 +113,16 @@ ...@@ -103,11 +113,16 @@
border-top: 1px solid #444; 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-left: 1px solid #6FC3DF;
border-right: 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-center,
.hc-black .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right { .hc-black .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-right {
border-left: 1px solid #6FC3DF; border-left: 1px solid #6FC3DF;
...@@ -118,14 +133,22 @@ ...@@ -118,14 +133,22 @@
border-top: 1px solid #6FC3DF; 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; transition: left 200ms ease-out;
} }
.monaco-workbench > .editor > .content > .editor-right.draggedunder { .monaco-workbench > .editor > .content.vertical-layout > .editor-right.draggedunder {
transition-property: right; 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 { .monaco-workbench > .editor > .content > .one-editor-silo > .container {
height: 100%; height: 100%;
} }
......
...@@ -1004,22 +1004,11 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti ...@@ -1004,22 +1004,11 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
// Update overlay styles // Update overlay styles
if (canSplit && isOverSplitRightOrBottom) { if (canSplit && isOverSplitRightOrBottom) {
if ($this.layoutVertically) { overlay.style($this.layoutVertically ? { left: '50%', width: '50%' } : { top: '50%', height: '50%' });
overlay.style({ left: '50%', width: '50%' });
} else {
overlay.style({ top: '50%', height: '50%' });
}
} else if (canSplit && isOverSplitLeftOrUp) { } else if (canSplit && isOverSplitLeftOrUp) {
if ($this.layoutVertically) { overlay.style($this.layoutVertically ? { width: '50%' } : { height: '50%' });
overlay.style({ width: '50%' });
} else {
overlay.style({ height: '50%' });
}
} else { } else {
overlay.style({ overlay.style({ left: '0', width: '100%' });
left: '0',
width: '100%'
});
} }
// Make sure the overlay is visible // Make sure the overlay is visible
...@@ -1188,8 +1177,8 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti ...@@ -1188,8 +1177,8 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
const visibleEditorCount = this.getVisibleEditorCount(); const visibleEditorCount = this.getVisibleEditorCount();
const mouseDownEvent = new StandardMouseEvent(e); const mouseDownEvent = new StandardMouseEvent(e);
const startX = mouseDownEvent.posx; const startPos = this.layoutVertically ? mouseDownEvent.posx : mouseDownEvent.posy;
let oldNewLeft: number = null; let oldNewPos: number = null;
this.silos[position].addClass('drag'); this.silos[position].addClass('drag');
this.parent.addClass('drag'); this.parent.addClass('drag');
...@@ -1199,63 +1188,63 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti ...@@ -1199,63 +1188,63 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
DOM.EventHelper.stop(e, false); DOM.EventHelper.stop(e, false);
const mouseMoveEvent = new StandardMouseEvent(e); const mouseMoveEvent = new StandardMouseEvent(e);
const diffX = mouseMoveEvent.posx - startX; const diffPos = (this.layoutVertically ? mouseMoveEvent.posx : mouseMoveEvent.posy) - startPos;
let newLeft: number = null; let newPos: number = null;
if (Math.abs(diffX) > 5) { if (Math.abs(diffPos) > 5) {
wasDragged = true; wasDragged = true;
} }
switch (position) { 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: { 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; break;
} }
case Position.CENTER: { 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) { 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 { 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; 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: { 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; break;
} }
} }
// Return early if position did not change // Return early if position did not change
if (oldNewLeft === newLeft) { if (oldNewPos === newPos) {
return; return;
} }
oldNewLeft = newLeft; oldNewPos = newPos;
// Live drag Feedback // Live drag Feedback
const moveTo: Position = this.findMoveTarget(position, diffX); const moveTo: Position = this.findMoveTarget(position, diffPos);
switch (position) { switch (position) {
case Position.LEFT: { case Position.LEFT: {
if (moveTo === Position.LEFT || moveTo === null) { if (moveTo === Position.LEFT || moveTo === null) {
this.silos[Position.CENTER].style({ left: this.silosSize[Position.LEFT] + 'px', right: 'auto', borderLeftWidth: '1px' }); this.posSilo(Position.CENTER, `${this.silosSize[Position.LEFT]}px`, 'auto');
this.silos[Position.RIGHT].style({ left: 'auto', right: 0 }); this.posSilo(Position.RIGHT, 'auto', 0);
} else if (moveTo === Position.CENTER) { } 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.CENTER].addClass('draggedunder');
this.silos[Position.RIGHT].style({ left: 'auto', right: 0 }); this.posSilo(Position.RIGHT, 'auto', 0);
} else if (moveTo === Position.RIGHT) { } else if (moveTo === Position.RIGHT) {
this.silos[Position.CENTER].style({ left: 0, right: 'auto' }); this.posSilo(Position.CENTER, 0, 'auto');
this.silos[Position.RIGHT].style({ left: 'auto', right: this.silosSize[Position.LEFT] + 'px' }); this.posSilo(Position.RIGHT, 'auto', `${this.silosSize[Position.LEFT]}px`);
this.silos[Position.RIGHT].addClass('draggedunder'); this.silos[Position.RIGHT].addClass('draggedunder');
} }
break; break;
...@@ -1263,38 +1252,38 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti ...@@ -1263,38 +1252,38 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
case Position.CENTER: { case Position.CENTER: {
if (moveTo === Position.LEFT) { 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'); this.silos[Position.LEFT].addClass('draggedunder');
} else if (moveTo === Position.CENTER || moveTo === null) { } else if (moveTo === Position.CENTER || moveTo === null) {
this.silos[Position.LEFT].style({ left: 0, right: 'auto' }); this.posSilo(Position.LEFT, 0, 'auto');
this.silos[Position.RIGHT].style({ left: 'auto', right: 0 }); this.posSilo(Position.RIGHT, 'auto', 0);
} else if (moveTo === Position.RIGHT) { } 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.RIGHT].addClass('draggedunder');
this.silos[Position.LEFT].style({ left: 0, right: 'auto' }); this.posSilo(Position.LEFT, 0, 'auto');
} }
break; break;
} }
case Position.RIGHT: { case Position.RIGHT: {
if (moveTo === Position.LEFT) { 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'); this.silos[Position.LEFT].addClass('draggedunder');
} else if (moveTo === Position.CENTER) { } else if (moveTo === Position.CENTER) {
this.silos[Position.LEFT].style({ left: 0, right: 'auto' }); this.posSilo(Position.LEFT, 0, 'auto');
this.silos[Position.CENTER].style({ left: (this.silosSize[Position.LEFT] + this.silosSize[Position.RIGHT]) + 'px', right: 'auto' }); this.posSilo(Position.CENTER, `${this.silosSize[Position.LEFT] + this.silosSize[Position.RIGHT]}px`, 'auto');
this.silos[Position.CENTER].addClass('draggedunder'); this.silos[Position.CENTER].addClass('draggedunder');
} else if (moveTo === Position.RIGHT || moveTo === null) { } else if (moveTo === Position.RIGHT || moveTo === null) {
this.silos[Position.LEFT].style({ left: 0, right: 'auto' }); this.posSilo(Position.LEFT, 0, 'auto');
this.silos[Position.CENTER].style({ left: this.silosSize[Position.LEFT] + 'px', right: 'auto' }); this.posSilo(Position.CENTER, `${this.silosSize[Position.LEFT]}px`, 'auto');
} }
break; break;
} }
} }
// Move the editor to provide feedback to the user and add class // Move the editor to provide feedback to the user and add class
if (newLeft !== null) { if (newPos !== null) {
this.silos[position].style({ left: newLeft + 'px' }); this.silos[position].style(this.layoutVertically ? { left: `${newPos}px` } : { top: `${newPos}px` });
this.silos[position].addClass('dragging'); this.silos[position].addClass('dragging');
this.parent.addClass('dragging'); this.parent.addClass('dragging');
} }
...@@ -1316,14 +1305,15 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti ...@@ -1316,14 +1305,15 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti
this.parent.removeClass('dragging'); this.parent.removeClass('dragging');
this.silos[position].removeClass('dragging'); this.silos[position].removeClass('dragging');
POSITIONS.forEach(p => this.silos[p].removeClass('draggedunder')); 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.posSilo(Position.LEFT, 0, 'auto');
this.silos[Position.RIGHT].style({ left: 'auto', right: 0, borderLeftWidth: '1px' }); this.posSilo(Position.CENTER, 'auto', 'auto');
this.posSilo(Position.RIGHT, 'auto', 0);
// Find move target // Find move target
const mouseUpEvent = new StandardMouseEvent(e); const mouseUpEvent = new StandardMouseEvent(e);
const diffX = mouseUpEvent.posx - startX; const diffPos = (this.layoutVertically ? mouseUpEvent.posx : mouseUpEvent.posy) - startPos;
const moveTo: Position = this.findMoveTarget(position, diffX); const moveTo: Position = this.findMoveTarget(position, diffPos);
// Move to valid position if any // Move to valid position if any
if (moveTo !== null) { if (moveTo !== null) {
...@@ -1345,63 +1335,71 @@ export class SideBySideEditorControl implements ISideBySideEditorControl, IVerti ...@@ -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(); const visibleEditorCount = this.getVisibleEditorCount();
switch (position) { switch (position) {
case Position.LEFT: { 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; 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; 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; return Position.CENTER;
} }
break; break;
} }
case Position.CENTER: { 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 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; 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; 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; return Position.RIGHT;
} }
break; break;
} }
case Position.RIGHT: { case Position.RIGHT: {
if (diffX > 0) { if (diffPos > 0) {
return null; // Return early since RIGHT cannot be moved more to the RIGHT 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; 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; return Position.CENTER;
} }
break; break;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册