From 4fcba7e50a008fd7ce6ceb1d554529f92ce02560 Mon Sep 17 00:00:00 2001
From: Damien Vitrac <dvitrac@pivotal.io>
Date: Thu, 5 Dec 2019 21:22:58 +0100
Subject: [PATCH] Review focus, backspace to delete selected item

---
 src/lib/editor/editor.component.html |  7 ++---
 src/lib/editor/editor.component.scss |  1 +
 src/lib/editor/editor.component.ts   | 18 +++++++++---
 src/lib/editor/paper.component.ts    | 41 ++++++++++++++++++++++++++++
 src/lib/module.ts                    |  4 ++-
 5 files changed, 61 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/editor/paper.component.ts

diff --git a/src/lib/editor/editor.component.html b/src/lib/editor/editor.component.html
index 85d011e..7174a58 100644
--- a/src/lib/editor/editor.component.html
+++ b/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>
diff --git a/src/lib/editor/editor.component.scss b/src/lib/editor/editor.component.scss
index fd4072d..52615e1 100644
--- a/src/lib/editor/editor.component.scss
+++ b/src/lib/editor/editor.component.scss
@@ -56,6 +56,7 @@ flo-view {
   overflow: auto;
   color: #FFF;
   background-color: #FFF;
+  outline: none;
 }
 
 /* Tooltip START */
diff --git a/src/lib/editor/editor.component.ts b/src/lib/editor/editor.component.ts
index f950c7b..73694ac 100644
--- a/src/lib/editor/editor.component.ts
+++ b/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 {
diff --git a/src/lib/editor/paper.component.ts b/src/lib/editor/paper.component.ts
new file mode 100644
index 0000000..9e9837b
--- /dev/null
+++ b/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();
+  }
+
+}
diff --git a/src/lib/module.ts b/src/lib/module.ts
index 84dbcc4..9d795b4 100644
--- a/src/lib/module.ts
+++ b/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,