Notebooks: Fix Selection/Focus when New Cells Added (#3649)

* Improvemnents to Active Cell

* Fix minor spacing issue

* fix editor focus order

* Fix for add cell above/below

* cleanup logic to have activeCell logic all reside in notebook model
This commit is contained in:
Chris LaFreniere
2019-01-02 15:20:05 -08:00
committed by GitHub
parent 5367101330
commit 2d52bc2a49
3 changed files with 26 additions and 20 deletions

View File

@@ -128,6 +128,7 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
let uri = this.createUri(); let uri = this.createUri();
this._editorInput = instantiationService.createInstance(UntitledEditorInput, uri, false, this.cellModel.language, '', ''); this._editorInput = instantiationService.createInstance(UntitledEditorInput, uri, false, this.cellModel.language, '', '');
this._editor.setInput(this._editorInput, undefined); this._editor.setInput(this._editorInput, undefined);
this._editor.focus();
this._editorInput.resolve().then(model => { this._editorInput.resolve().then(model => {
this._editorModel = model.textEditorModel; this._editorModel = model.textEditorModel;
this._modelService.updateModel(this._editorModel, this.cellModel.source); this._modelService.updateModel(this._editorModel, this.cellModel.source);

View File

@@ -203,9 +203,9 @@ export class NotebookModel extends Disposable implements INotebookModel {
return this._cells.findIndex((cell) => cell.equals(cellModel)); return this._cells.findIndex((cell) => cell.equals(cellModel));
} }
public addCell(cellType: CellType, index?: number): void { public addCell(cellType: CellType, index?: number): ICellModel {
if (this.inErrorState || !this._cells) { if (this.inErrorState || !this._cells) {
return; return null;
} }
let cell = this.createCell(cellType); let cell = this.createCell(cellType);
@@ -215,12 +215,18 @@ export class NotebookModel extends Disposable implements INotebookModel {
this._cells.push(cell); this._cells.push(cell);
index = undefined; index = undefined;
} }
// Set newly created cell as active cell
this._activeCell.active = false;
this._activeCell = cell;
this._activeCell.active = true;
this._contentChangedEmitter.fire({ this._contentChangedEmitter.fire({
changeType: NotebookChangeType.CellsAdded, changeType: NotebookChangeType.CellsAdded,
cells: [cell], cells: [cell],
cellIndex: index cellIndex: index
}); });
return cell;
} }
private createCell(cellType: CellType): ICellModel { private createCell(cellType: CellType): ICellModel {

View File

@@ -63,14 +63,12 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
private _isInErrorState: boolean = false; private _isInErrorState: boolean = false;
private _errorMessage: string; private _errorMessage: string;
protected _actionBar: Taskbar; protected _actionBar: Taskbar;
private _activeCell: ICellModel;
protected isLoading: boolean; protected isLoading: boolean;
private notebookManager: INotebookManager; private notebookManager: INotebookManager;
private _modelReadyDeferred = new Deferred<NotebookModel>(); private _modelReadyDeferred = new Deferred<NotebookModel>();
private _modelRegisteredDeferred = new Deferred<NotebookModel>(); private _modelRegisteredDeferred = new Deferred<NotebookModel>();
private profile: IConnectionProfile; private profile: IConnectionProfile;
private _trustedAction: TrustedAction; private _trustedAction: TrustedAction;
private _activeCellId: string;
constructor( constructor(
@@ -138,7 +136,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
} }
public get activeCellId(): string { public get activeCellId(): string {
return this._activeCellId; return this._model && this._model.activeCell ? this._model.activeCell.id : '';
} }
public get modelRegistered(): Promise<NotebookModel> { public get modelRegistered(): Promise<NotebookModel> {
@@ -158,32 +156,29 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
if (event) { if (event) {
event.stopPropagation(); event.stopPropagation();
} }
if (cell !== this._activeCell) { if (cell !== this.model.activeCell) {
if (this._activeCell) { if (this.model.activeCell) {
this._activeCell.active = false; this.model.activeCell.active = false;
} }
this._activeCell = cell; this._model.activeCell = cell;
this._activeCell.active = true; this._model.activeCell.active = true;
this._model.activeCell = this._activeCell;
this._activeCellId = cell.id;
this._changeRef.detectChanges(); this._changeRef.detectChanges();
} }
} }
public unselectActiveCell() { public unselectActiveCell() {
if (this._activeCell) { if (this.model.activeCell) {
this._activeCell.active = false; this.model.activeCell.active = false;
} }
this._activeCell = null; this.model.activeCell = null;
this._model.activeCell = null;
this._activeCellId = null;
this._changeRef.detectChanges(); this._changeRef.detectChanges();
} }
// Add cell based on cell type // Add cell based on cell type
public addCell(cellType: CellType) public addCell(cellType: CellType)
{ {
this._model.addCell(cellType); let newCell = this._model.addCell(cellType);
this.selectCell(newCell);
} }
// Updates Notebook model's trust details // Updates Notebook model's trust details
@@ -201,12 +196,12 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
switch (event.key) { switch (event.key) {
case 'ArrowDown': case 'ArrowDown':
case 'ArrowRight': case 'ArrowRight':
let nextIndex = (this.findCellIndex(this._activeCell) + 1) % this.cells.length; let nextIndex = (this.findCellIndex(this.model.activeCell) + 1) % this.cells.length;
this.selectCell(this.cells[nextIndex]); this.selectCell(this.cells[nextIndex]);
break; break;
case 'ArrowUp': case 'ArrowUp':
case 'ArrowLeft': case 'ArrowLeft':
let index = this.findCellIndex(this._activeCell); let index = this.findCellIndex(this.model.activeCell);
if (index === 0) { if (index === 0) {
index = this.cells.length; index = this.cells.length;
} }
@@ -252,6 +247,10 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
this._register(model); this._register(model);
this._modelRegisteredDeferred.resolve(this._model); this._modelRegisteredDeferred.resolve(this._model);
model.backgroundStartSession(); model.backgroundStartSession();
// Set first cell as default active cell
if (this._model && this._model.cells && this._model.cells[0]) {
this.selectCell(model.cells[0]);
}
this._changeRef.detectChanges(); this._changeRef.detectChanges();
} }