Remove selected on blur event

src/lib/editor/editor.component.html

@@ -20,7 +20,7 @@
       [resizerRight]="'#paper-container'">
     </div>
 
-      <flo-editor-paper tabindex="0" (onDelete)="deleteSelected()"
+      <flo-editor-paper tabindex="0" (onDelete)="deleteSelected()" (onBlur)="editorContext.selection = null"
                         (onProperties)="onPropertiesHandle()">
         <div id="paper" class="paper" tabindex="0" style="overflow: hidden; position: absolute; display: block; height:100%; width:100%; overflow:auto;"></div>
         <ng-content select="[canvas]"></ng-content>

src/lib/editor/paper.component.ts

@@ -1,7 +1,7 @@
 import {
   Component,
   ElementRef, EventEmitter,
-  HostListener,
+  HostListener, OnInit,
   Output,
   ViewChild,
   ViewEncapsulation
@@ -16,7 +16,7 @@ import {
   styleUrls: ['./editor.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class PaperComponent {
+export class PaperComponent implements OnInit {
 
   @ViewChild('paper', { static: true }) paperElement: ElementRef;
 
@@ -26,6 +26,9 @@ export class PaperComponent {
   @Output()
   onProperties = new EventEmitter<number>();
 
+  @Output()
+  onBlur = new EventEmitter<boolean>();
+
   @HostListener('click')
   click() {
     this.paperElement.nativeElement.focus();
@@ -51,4 +54,11 @@ export class PaperComponent {
     this.onProperties.emit();
   }
 
+  ngOnInit(): void {
+    const onBlur = this.onBlur;
+    this.paperElement.nativeElement.addEventListener('blur', () => {
+      onBlur.emit();
+    });
+  }
+
 }