From fdf3b6ffbc9bbf80eb3ad9a125d0f6241cbeb0fc Mon Sep 17 00:00:00 2001
From: Andy Clement <aclement@pivotal.io>
Date: Wed, 8 Nov 2017 10:06:28 -0800
Subject: [PATCH] Turn on graph-text syncing when palette gets focus

Previously we were turning on graph-text syncing typically when
the text box loses focus (on blur) but that is driven when you
switch browser tabs. This means switching browser tabs and back
again could damage your text (if you were mid-something) even
though you hadn't actually touch the graph canvas. With this
change we only turn on graph-text syncing (and drive the
regeneration of the text from the graph) if you actively
interact with the palette
---
 src/lib/src/editor/editor.component.html   | 3 ++-
 src/lib/src/palette/palette.component.html | 2 +-
 src/lib/src/palette/palette.component.ts   | 7 +++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/src/editor/editor.component.html b/src/lib/src/editor/editor.component.html
index b89569f..06792f5 100644
--- a/src/lib/src/editor/editor.component.html
+++ b/src/lib/src/editor/editor.component.html
@@ -4,7 +4,8 @@
     <div *ngIf="!noPalette" id="palette-container" class="palette-container" style="overflow:hidden;">
       <flo-palette [metamodel]="metamodel" [renderer]="renderer" [paletteSize]="paletteSize"
                    (onPaletteEntryDrop)="handleDnDFromPalette($event)"
-                    (paletteReady)="updatePaletteReadyState($event)"></flo-palette>
+                    (paletteReady)="updatePaletteReadyState($event)"
+                    (paletteFocus)="graphToTextSync=true"></flo-palette>
     </div>
 
     <div id="sidebar-resizer" *ngIf="!noPalette"
diff --git a/src/lib/src/palette/palette.component.html b/src/lib/src/palette/palette.component.html
index 81c18c9..88f3d93 100644
--- a/src/lib/src/palette/palette.component.html
+++ b/src/lib/src/palette/palette.component.html
@@ -1,5 +1,5 @@
 <div id="palette-filter" class="palette-filter">
-  <input type="text" id="palette-filter-textfield" class="palette-filter-textfield" [(ngModel)]="filterText"/>
+  <input type="text" id="palette-filter-textfield" class="palette-filter-textfield" [(ngModel)]="filterText" (focus)="onFocus()"/>
 </div>
 <div id="palette-paper-container" style="height:calc(100% - 40px); width:100%; overflow:auto;">
   <div id="palette-paper" class="palette-paper" style="overflow:hidden;"></div>
diff --git a/src/lib/src/palette/palette.component.ts b/src/lib/src/palette/palette.component.ts
index 3fe7837..ba68b64 100644
--- a/src/lib/src/palette/palette.component.ts
+++ b/src/lib/src/palette/palette.component.ts
@@ -85,6 +85,9 @@ export class Palette implements OnInit, OnDestroy, OnChanges {
   @Output()
   paletteReady = new EventEmitter<boolean>();
 
+  @Output()
+  paletteFocus = new EventEmitter<void>();
+
   private _paletteSize : number;
 
   private _filterText : string = '';
@@ -127,6 +130,10 @@ export class Palette implements OnInit, OnDestroy, OnChanges {
     this.closedGroups = new Set<string>();
   }
 
+  onFocus(): void {
+    this.paletteFocus.emit();
+  }
+
   ngOnInit() {
     let element = $('#palette-paper', this.element.nativeElement);
     // Create the paper for the palette using the specified element view