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

@@ -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"

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>

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