Review focus, backspace to delete selected item

src/lib/editor/editor.component.html

@@ -20,12 +20,10 @@
       [resizerRight]="'#paper-container'">
     </div>
 
-    <div>
-
-      <div id="paper-container">
+      <flo-editor-paper tabindex="0" (onDelete)="editorContext.deleteSelectedNode()">
         <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>
-      </div>
+      </flo-editor-paper>
 
       <span class="canvas-controls-container" ng-if="canvasControls">
         <table ng-if="canvasControls.zoom" class="canvas-control zoom-canvas-control">
@@ -50,7 +48,6 @@
         </table>
       </span>
 
-    </div>
   </div>
 </div>
 <ng-content select="[footer]"></ng-content>

src/lib/editor/editor.component.scss

@@ -56,6 +56,7 @@ flo-view {
   overflow: auto;
   color: #FFF;
   background-color: #FFF;
+  outline: none;
 }
 
 /* Tooltip START */

src/lib/editor/editor.component.ts

@@ -1,4 +1,13 @@
-import { Component, Input, Output, ElementRef, EventEmitter, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  ElementRef,
+  EventEmitter,
+  OnInit,
+  OnDestroy,
+  ViewEncapsulation,
+} from '@angular/core';
 import { debounceTime } from 'rxjs/operators';
 import { dia } from 'jointjs';
 import { Flo } from '../shared/flo-common';
@@ -157,6 +166,7 @@ export class EditorComponent implements OnInit, OnDestroy {
 
   private _resizeHandler = () => this.autosizePaper();
 
+
   constructor(private element: ElementRef) {
     let self = this;
     this.editorContext = new (class DefaultRunnableContext implements Flo.EditorContext {
@@ -1185,9 +1195,9 @@ export class EditorComponent implements OnInit, OnDestroy {
     });
 
     // JointJS now no longer grabs focus if working in a paper element - crude...
-    $('#flow-view', this.element.nativeElement).on('mousedown', () => {
-      $('#palette-filter-textfield', this.element.nativeElement).focus();
-    });
+    // $('#flow-view', this.element.nativeElement).on('mousedown', () => {
+      // $('#palette-filter-textfield', this.element.nativeElement).focus();
+    // });
   }
 
   initPaper(): void {

src/lib/editor/paper.component.ts

@@ -0,0 +1,41 @@
+import {
+  Component,
+  ElementRef, EventEmitter,
+  HostListener,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+
+@Component({
+  selector: 'flo-editor-paper',
+  template: `
+    <div #paper tabindex="0" id="paper-container">
+      <ng-content></ng-content>
+    </div>`,
+  styleUrls: ['./editor.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PaperComponent {
+
+  @ViewChild('paper', { static: true }) paperElement: ElementRef;
+
+  @Output()
+  onDelete = new EventEmitter<number>();
+
+  @HostListener('click')
+  click() {
+    this.paperElement.nativeElement.focus();
+  }
+
+  @HostListener('mousedown')
+  mousedown() {
+    this.paperElement.nativeElement.focus();
+  }
+
+  @HostListener('keydown.backspace')
+  backspaceHandle() {
+    this.onDelete.emit();
+  }
+
+}

src/lib/module.ts

@@ -9,6 +9,7 @@ import { DslEditorComponent } from './dsl-editor/dsl-editor.component';
 import { CodeEditorComponent } from './code-editor/code-editor.component';
 import { PropertiesGroupComponent } from './properties/properties.group.component';
 import { DynamicFormPropertyComponent } from './properties/df.property.component';
+import { PaperComponent } from './editor/paper.component';
 
 @NgModule({
   imports: [
@@ -23,7 +24,8 @@ import { DynamicFormPropertyComponent } from './properties/df.property.component
     DslEditorComponent,
     CodeEditorComponent,
     PropertiesGroupComponent,
-    DynamicFormPropertyComponent
+    DynamicFormPropertyComponent,
+    PaperComponent
   ],
   exports: [
     EditorComponent,