From de5a91a13f782f9af9fe8788f5ca94dda04119a9 Mon Sep 17 00:00:00 2001
From: Chris LaFreniere <40371649+chlafreniere@users.noreply.github.com>
Date: Wed, 5 Dec 2018 13:22:56 -0800
Subject: [PATCH] Allow for Notebook Cell Unselection (#3460)

* Allow for cell unselection

* PR Feedback: use event.stopPropagation() when multiple events can fire

* Ensure markdown goes into Preview mode when  cell not selected
---
 .../notebook/cellViews/textCell.component.ts      |  6 ++----
 src/sql/parts/notebook/notebook.component.html    |  4 ++--
 src/sql/parts/notebook/notebook.component.ts      | 15 ++++++++++++++-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/sql/parts/notebook/cellViews/textCell.component.ts b/src/sql/parts/notebook/cellViews/textCell.component.ts
index 963b632ff9..a8fa274db4 100644
--- a/src/sql/parts/notebook/cellViews/textCell.component.ts
+++ b/src/sql/parts/notebook/cellViews/textCell.component.ts
@@ -82,9 +82,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 			if (propName === 'activeCellId') {
 				let changedProp = changes[propName];
 				this._activeCellId = changedProp.currentValue;
-				if (this._activeCellId) {
-					this.toggleEditMode(false);
-				}
+				this.toggleEditMode(false);
 				break;
 			}
 		}
@@ -117,7 +115,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 		}
 		return content;
 	}
-	
+
 
 	// Todo: implement layout
 	public layout() {
diff --git a/src/sql/parts/notebook/notebook.component.html b/src/sql/parts/notebook/notebook.component.html
index 6f44e48122..338099d191 100644
--- a/src/sql/parts/notebook/notebook.component.html
+++ b/src/sql/parts/notebook/notebook.component.html
@@ -7,9 +7,9 @@
 <div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
 	<div #toolbar class="editor-toolbar actionbar-container" style="flex: 0 0 auto; display: flex; flex-flow: row; width: 100%; align-items: center; height: 36px">
 	</div>
-	<div class="scrollable" style="flex: 1 1 auto; position: relative">
+	<div class="scrollable" style="flex: 1 1 auto; position: relative" (click)="unselectActiveCell()">
 		<loading-spinner [loading]="isLoading"></loading-spinner>
-		<div class="notebook-cell" *ngFor="let cell of cells" (click)="selectCell(cell)" [class.active]="cell.active" (keydown)="onKeyDown($event)">
+		<div class="notebook-cell" *ngFor="let cell of cells" (click)="selectCell(cell, $event)" [class.active]="cell.active" (keydown)="onKeyDown($event)">
 			<code-cell-component *ngIf="cell.cellType === 'code'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
 			</code-cell-component>
 			<text-cell-component *ngIf="cell.cellType === 'markdown'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
diff --git a/src/sql/parts/notebook/notebook.component.ts b/src/sql/parts/notebook/notebook.component.ts
index 61b02bb03f..4cc27cc4b5 100644
--- a/src/sql/parts/notebook/notebook.component.ts
+++ b/src/sql/parts/notebook/notebook.component.ts
@@ -140,7 +140,10 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		toolbarEl.style.borderBottomColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
 	}
 
-	public selectCell(cell: ICellModel) {
+	public selectCell(cell: ICellModel, event?: Event) {
+		if (event) {
+			event.stopPropagation();
+		}
 		if (cell !== this._activeCell) {
 			if (this._activeCell) {
 				this._activeCell.active = false;
@@ -153,6 +156,16 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		}
 	}
 
+	public unselectActiveCell() {
+		if (this._activeCell) {
+			this._activeCell.active = false;
+		}
+		this._activeCell = null;
+		this._model.activeCell = null;
+		this._activeCellId = null;
+		this._changeRef.detectChanges();
+	}
+
 	// Add cell based on cell type
 	public addCell(cellType: CellType)
 	{